浅谈replace()
replace()简单介绍
replace()基本语法是String.replace(searchValue,replaceValue),其中searchValue为字符串或者正则,replaceValue为字符串或者函数。对于第一个参数为字符串是很简单的。
var str = 'hello world';
str.replace('h','H');//Hello world
这算是最基本的的替换了。如果仅仅只用到这种替换的话,我只能说真是太无趣了。我们把正则拉出来,处理复杂的替换,用函数来实现逻辑上的难点。
深入了解replace()
1.第二个参数为字符串
如果第二个参数是字符串,还可以使用一些特殊的字符序列,将正则表达式操作得到的值插入到结果字符串中,下表列出了ECMAScript提供的这些特殊的字符序列。
字符 | 替换文本 |
$& | 与正则相匹配的字符串 |
$` | 匹配字符串左边的字符 |
$’ | 匹配字符串右边的字符 |
$n(n=1~99) | 匹配结果中对应的分组匹配结果 |
我们用这些特殊字符序列实现一些复杂的功能。先来看看调换位置。
var str = "hello world";
var rep = /(\w+)\s(\w+)/;
str.replace(rep, "$2, $1");
通过这些字符序列还可以对str做一些特殊的处理,比如说将‘hello’加上[]
var str = "hello world";
var rep = /(\w+)/;
console.log(str.replace(rep, "[$1]"));
看一个stackoverflow上的问题
var iable = '<td>some text</td><td>some text2</td><td>some text3</td><td>some text4</td><td>some text5</td><td>some text6</td>';
var iable1 ='<td>some text</td><td>some text2</td></tr><tr><td>some text3</td><td>some text4</td></tr><tr><td>some text5</td><td>some text6</td></tr><tr>';
问题是如何从iable转化为iable1,也就是怎么做才能把some text2、some text4和some text6后的</td>替换为</td></tr><tr>
var variable = '<td>some text</td><td>some text2</td><td>some text3</td><td>some text4</td><td>some text5</td><td>some text6</td>'; var reg = /(<td>.*?<\/td><td>.*?)<\/td>/g; alert(variable.replace(reg, '$1</tr><tr>'));
这个是其中一个用户给出的答案,用的是replace函数,当然还有其他的更简单的一些方法,有兴趣的可以去看看。
对于replace(),能把正则理解透彻,这些替换也就不难了。
2.第二个参数是函数
函数为replace()增加了很多的灵活性,在实际应用中个人感觉会用到很多(还莫有写太多h5),因为我们会用到太多的交互,用函数传参就很好实现了。
(function (window) {
function fn(str) {
this.str = str;
}
fn.prototype.format = function () {
var arg =Array.prototype.slice.call(arguments,0);return this.str.replace(/\{(\d+)\}/g, function (a, b) {
return arg[b] || '';
});
}
window.fn = fn;
})(window);
// use
(function(){
var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
console.log( t.format('http://www.alibaba.com', 'Alibaba', 'Welcome') );
})();
这个是阿里巴巴一个面试题,具体考的是什么,还有函数是怎么实现的我就不多说了,我们主要来看下a和b的值对应的是什么。从arg[b]可以看出b应该是数字,应为arg是数组,而且根据format()所传的参数能推断出b为0,1,2。那么a是什么呢?我们可以把arg[b]换成a,然后运行,看下结果是什么。打印结果是“<p><a href="{0}">{1}</a><span>{2}</span></p>”,看到结果的我也是惊了个呆,赶紧查看是不是哪出错了,仔细看了下才发现a原来是匹配的字符,恍然大悟。
其实传入的函数还有另两个参数,我们把它们写进去,分别为c和d,然后按照同样的方法进行打印,也就得到c和d所代表的内容。那么这4个参数:第一个参数表示匹配到的字符,第二个参数表示匹配到的字符最小索引位置(RegExp.index),第三个参数表示被匹配的字符在整个字符串的位置,第四个参数表示被匹配的整个字符串。
了解了这几个参数是什么,相信对于函数传参的使用也就信手拈来了。
浅谈replace()的更多相关文章
- 浅谈 Fragment 生命周期
版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...
- 浅谈JavaScript浮点数及其运算
原文:浅谈JavaScript浮点数及其运算 JavaScript 只有一种数字类型 Number,而且在Javascript中所有的数字都是以IEEE-754标准格式表示的.浮点数的精度问题 ...
- 浅谈 PHP 神盾的解密过程
原文:浅谈 PHP 神盾的解密过程 前些日子一个朋友丢了个shell给我,让我帮忙解密,打开源码看了下写着是 “神盾加密” , 牛逼闪闪的样子.百度下发现神盾是个很古老的东西,最后一次更新是在 201 ...
- 浅谈 js 字符串 trim 方法之正则篇
原文:浅谈 js 字符串 trim 方法之正则篇 关于 trim 其实没啥好说的,无非就是去除首位空格,对于现代浏览器来说只是简单的正则 /^\s+|\s+$/ 就可以搞定了.而且支持中文空格 等 ...
- 浅谈Windows环境下DOS及MS-DOS以及常见一些命令的介绍
浅谈Windows环境下DOS及MS-DOS以及常见一些命令的介绍 前记 自己是搞编程的,首先我是一个菜鸟,接触计算机这么久了,感觉很多计算机方面的技术和知识朦朦胧胧.模模糊糊,貌似有些贻笑大方了:所 ...
- SpringBoot2.x使用EasyPOI导入Excel浅谈
SpringBoot2.x使用EasyPOI导入Excel浅谈 平时经常遇到客户要帮忙导入一些数据到数据库中,有些数据比较多有时候手动录入就会很耗时间,所以就自己写一个Excel导入的demo记录一下 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 浅谈 cxx rope
一般说的浅谈是永远不会短的 然后$qwq$本宝宝并不想讲实现原理 会用就行了呗 然后方便起见,本文规定数组$a$的第$1$位为$a[0]$ 并且本文的所有$debug$为了方便看到我们$rope$长度 ...
- 浅谈Windows API编程
WinSDK是编程中的传统难点,个人写的WinAPI程序也不少了,其实之所以难就难在每个调用的API都包含着Windows这个操作系统的潜规则或者是windows内部的运行机制…… WinSDK是编程 ...
随机推荐
- user32的使用
通过代码查询特定的窗口,并在文本框中输入文字然后单击"OK"按钮 需要查找的Dialog 使用Spy++查看窗口信息 通过代码实现功能 class Program { //defi ...
- Hangman游戏源代码 --- python实现
#hangman.py from PythonCard import model,dialog import random def find_letters(letter,a_string): loc ...
- could not read column value from result set:
错误描述: INFO [http-apr-8080-exec-26] (NullableType.java:203) - could not read column value from result ...
- RxAndroid+RxJava+Gson+retrofit+okhttp初步搭建android网络请求框架
新建工程集成, 一.工具集成(2017-4-27) 首先第一步集成retrofit retrofit 的 git 网站: https://github.com/square/retrofit 在git ...
- viterbi维特比算法和隐马尔可夫模型(HMM)
隐马尔可夫模型(HMM) 原文地址:http://www.cnblogs.com/jacklu/p/7753471.html 本文结合了王晓刚老师的ENGG 5202 Pattern Recognit ...
- 洛谷 P2893 [USACO08FEB]修路Making the Grade 解题报告
P2893 [USACO08FEB]修路Making the Grade 题目描述 A straight dirt road connects two fields on FJ's farm, but ...
- MySQL使用笔记(二)数据库基本操作
By francis_hao Dec 11,2016 数据库是什么 数据库是什么呢?对于MySQL来说,数据库是存储数据库对象的容器,参考[1]中的简单解释是:数据库是一个拥有特定排放顺序的文件 ...
- POJ2912:Rochambeau(带权并查集)
Rochambeau Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 5208 Accepted: 1778 题目链接:h ...
- json解析之jackson
对于json格式的数据解析现在越来越多了,之前介绍了两种:fastjson和net.sf.json解析. 今天又有一个jackson解析.不过相对于之前两种,这种感觉稍微笨拙些.呵呵,还是了解下吧: ...
- Linux 下打包报错:enospc (no space left on device)
昨天打了个包,早上发现很多页面js加载404,一查原来打包的min文件夹下是空的,打包出错了 Error code: enospc du -sh * rm -f 文件名称 rm -rf 目录名称 前端 ...