详解JavaScript 中的replace （）函数
Javascript 中字符串对象有⼀个⽅法replace （），它的作⽤⾮常强⼤。这⾥把它的⽤法整理⼀下。
⼀、⽅法简介
该⽅法的签名是：replace([RegExp|String],[String|Function])。
该⽅法 返回⼀个新的字符串，但并不改变字符串本⾝。
该⽅法接收2个参数，第⼀个参数可以是字符串，也可以是⼀个正则表达式；第⼆个参数可以是⼀个字符串，也可以是⼀个函数。其中第2个参数如果是函数，那么⽤起来是⼗分强⼤⽽且灵活的，不过相对来说也⽐较难掌握。下⾯就其⽤法进⾏详细说明。
⼆、基本⽤法 ⼆、基本⽤法
假如我们有⼀个字符串中出现了错别字”背景“，需要⽤”北京“来替换，那么我们可以如下搞定：
var str = "我爱背景天安门";
str = place("背景","北京");
console.log(str); //输出结果：我爱北京天安门
这个⽤法跟C#中的replace()⽤法别⽆⼆致，⼤家⼀看就明⽩。
但是这个⽤法有个“坑”，看下例：
var str = "我爱背景天安门，但是背景雾霾太严重";
str = place("背景","北京");
console.log(str); //输出结果：我爱北京天安门，但是背景雾霾太严重
我们发现，如果字符串str 中有多个待替换的⼦串，⽐如本例中的“背景”，出现了2次，那么replace()⽅法只能给我们⽤⽬标字符串(北京）替换掉第1次出现的"背景"。如果想把所有的"背景"都给替换了，就必须调⽤多次。这是我们不能接受的，因为我们⽆法预知原始字符串中出现了多少个错别字。
幸好，replace()⽅法还提供了第⼆种⽤法，就是使⽤正则表达式。
三、使⽤正则表达式
var str = "我爱背景天安门，但是背景雾霾太严重";
str = place(/背景/g,"北京");
console.log(str); //输出结果：我爱北京天安门，但是北京雾霾太严重
这⾥需要说明的是，place(/背景/g,"北京")的第⼀个参数 ”/背景/g“ 是⼀个正则表达式，使⽤/ /的正则写法是JavaScript 中正则表达式的字⾯量写法。在此处，正则表达式的末尾有个g ，它表⽰match 源字符串str 中所有匹配项。这⾥如果没有g ，那么也只能匹配到第⼀个错别字”背景“，只有加了这个g ，才能匹配到所有的”背景“。
四、正则表达式+function 的⽤法
以上的⽤法还是⽐较直观的，但是能实现的功能也⽐较简单，如果需要做⼀些复杂的字符串替换运算，那么就需要使⽤较为⾼级（复杂）的⽤法，就是 正则+function 的⽤法。说⽩了就是第⼀参数传⼀个正则表达式，我们下⾯称之为RegArg ；第⼆个参数给⼀个函数，我们下⾯称之为FuncArg 。这也是replace()的核⼼⽤法。
讨论这个⽤法的前提，就是需要对JavaScript 的Sring.match()有充分理解。不了解的，可以参考 。
这个⽤法的本质就是：对str 使⽤RegArg 做match()匹配，如果匹配到多项结果（⽐如使⽤了全局匹配g ，或者分组），那么每⼀个匹配结果都将执⾏⼀次FuncArg 函数，并且⽤该函数的返回值替代源
字符串中的匹配项。
这个⽤法复杂就复杂在这个FuncArg 有不同的使⽤⽅式，下⾯做详细介绍。
4.1简单⽤法，正则表达式不使⽤分组
var str = '我爱背景天安门，但是背景雾霾太严重';
var re = place(/背景/, function (){
console.log(arguments);
return '北京';
})
输出结果是
解析：
1. 本例的意图是：把源字符串中的‘背景’，替换为‘北京’。
2. 正则表达式没有使⽤全局匹配符g，所以只替换了源字符串中第⼀个‘背景’⼦串，FuncArg只执⾏了⼀次
3. 前⾯都不难理解，关键是：replace()函数，当第⼆个参数是⼀个函数时，这个函数是有参数的，⽽且这些参数是默认的。需要说明的是，当前这个例⼦⽐
较简单，所以只有3个匹配项，
arguments[0]是匹配到的⼦字符串；
arguments[1]是匹配到的⼦串的索引位置
arguments[2]是源字符串本⾝
4.本例如果想替换所有的‘背景’为‘北京’，只需要让正则表达式后加个g。代码我就不贴出来了，只贴出来输出结果。
我们可以看到，输出了2个Arguments，因为我们使⽤全局匹配g后，会match到2个项，所以就执⾏了2次function。第⼀个跟前边⼀样，第⼆个arugments 的索引位置是10，因为源字符串中第⼆个‘背景’的索引是10.
如果就做这样的例⼦，你可能觉得还不如直接使⽤： str = place(/背景/g,"北京");
那么就再来⼀个例⼦，看看使⽤function做参数的好处。
这个例⼦的意图是，把捐款是100元以下的⾦额数⽤‘**’来替换掉。
var txt ='刘菲：50元。张常成：150元。孙⽟杰：200元。李明轩：20元。李⼦豪：1500元。';
var txt = place(/\d+/g, function(){
console.log(arguments);
return arguments[0].length > 2 ? arguments[0] : '**';
})
console.log(txt);
输出的结果是：
我们可以看到，刘菲和李明轩的捐款被替换成 ** 了。
4.2复杂⽤法，正则使⽤分组
var txt ='刘菲：5万。张常成：5000元。孙⽟杰：2000元。李明轩：20万。李⼦豪：8500元。';
var txt = place(/(\d+)(万)/g, function(){
console.log(arguments);
})
1. 这个例⼦的意图是：把所有以“万”为单位的捐款，其⾦额改为‘元’。⽐如：4万，改为40000元
2. 这个例⼦只写了⼀半，⽬的是要研究下在正则表达式使⽤了分组以后arguments的变化
3. 输出结果是：
仔细观察arguments结果集，明显⽐上⼀个例⼦多出2项。这些项分别是：
arguments[0]是匹配到的⼦字符串；
arguments[1]是匹配到的第1个分组项
arguments[2]是匹配到的第2个分组项
arguments[3]是匹配到的字符串的索引位置
arguments[4]是源字符串本⾝
这⾥正则有2个分组，所以多了匹配到的2个分组项；同理，如果有3个分组，就会多出3个匹配到的分组项。 看懂了这个回调函数的arguments各项代表的意义，下⾯，我们就来真正的解决问题。
var txt ='刘菲：5万。张常成：5000元。孙⽟杰：2000元。李明轩：20万。李⼦豪：8500元。';
var txt = place(/(\d+)(万)/g, function(){
console.log(arguments);
return arguments[1] + '0000' + '元';
})
console.log(txt);
输出结果是：
js arguments
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论