网上有关 replace 的文章很多了,这里主要聊聊它的第二个参数.阅读本文需要对 replace 方法有一定了解.
我们要把一段字符串中的某些指定字符替换掉,第一时间想到的就是 replace 方法,他的用法很简单,W3school 上讲的清晰易懂.
replace 第一个参数一般放置的是正则表达式,用来匹配想要替换的文本;第二个参数一般我们放入的是字符串,用来替换掉正则匹配到的文本.
其实 replace 远比上面说的要强大的多,它的内部已经封装的很完善了,远不是我们想象的那么简单,下面我们就来详细聊聊 replace 的第二个参数.
现在要实现一个功能,把 html 中的字符实体转换成它们所对应的字符,比如:"<" 转换成对对应字符为:"<".
下面我们来看看代码实现:
String.prototype.deentityfy = (function() {
var entity = {
lt: '<',
gt: '>';
return function() {
return this.replace(/&([^&;]+);/g,
function(a, b, c, d) {
console.log('a:' + a + '---b:' + b + '---c:' + c + '---d:' + d);
var r = entity[b];
return typeof r === 'string' ? r: a;
})
}
} ()) document.write('<h1 > 我是标题 </h1>'.deentityfy());
这里得讲讲字符实体,以免下面混淆.
字符实体是不会当作 HTML 语句来解析的,比如上面的'<h1> 我是标题 & lt;/h1>'这一段输出到页面上,我们看到的是这样的:
<h1> 只是被浏览器当作字符串输出,而不是标签输出,上面这段代码就是把这些字符实体转换成对应字符,能够被浏览器所编译.
我们一步步来看上面的代码是怎么实现的.
首先,给 String 对象的原型挂载了一个 deentityfy 方法,这个方法是个自执行函数,使用闭包的形式,函数内的所有内容对外都是不可见的.
函数内,我们定义了一个 entity 对象字面量,里面有两个属性,分别对应标签的左右尖括号.
接下来 return 一个匿名函数,把我们要做的事写在这个函数内.
我们调用 replace 方法,第一个参数放置正则表达式:
/&([^&;]+);/g
这段正则表达式的匹配规则是:以 "&" 开头,后面紧跟一个或一个以上不是 "&" 和 ";" 的字符,以 ";" 结束.后面的 g 代表全局匹配.(更多有关正则表达式的学习请)
这里着重说下,正则中的 "()" 和 javascript 中运算时使用的 "()" 概念是不同的,这里的括号术语叫做:.简单的说就是把括号内匹配到的字符暂时储存起来,在待会的替换环节可以取出来用.
接下来详细讲讲 replace 的第二个参数,也就是本文的重点.
我们一般是放一个字符串在第二个参数中,直接用于替换所匹配到的字符;还有更高阶的技巧,使用 $ 字符可以取得捕获括号中的内容,再进行相关操作.具体可以查看,里面都有讲.
还有第三种方法, 给第二个参数传入匿名函数,函数的返回值用做替换的字符.
匿名函数有 4 个参数可以传入,当然,这些参数都不是必须要传的.
第一个参数:正则所匹配到的字符;
第二个参数:捕获括号所捕获到的字符;
第三个参数:正则匹配到的每段字符的第一个字符的索引;
第四个参数:用于匹配的字符串主体;
我把上面代码的运行结果打印出来大家应该就很清晰了:
接触正则也快三年时间了,一直不知道正则还有这么强大的功能,当然也可能是我孤陋寡闻啦.希望大家永葆一颗学习的心,一起进步.
来源: http://www.cnblogs.com/chinajins/p/5772050.html