javascript中replace还可以这样玩

一：常规操作

在平时开发中用replace时，无非就是匹配一个字符串，然后替换成要换的，例如↓

"1,2,32".replace(',', '-')
//"1-2,32"
"1,2,32".replaceAll(',', '-')
//"1-2-32"

　　同样也可以用正则

"1,2,32".replace(/,/, '-')
// "1-2,32"
"1,2,32".replace(/,/g, '-')
//"1-2-32"  加了g就和replaceAll一样的功能了

 

二：$1-9分组操作

 除了我们经常使用的replace()形式stringObject.replace(regexp/substr,replacement)，

第二个参数也可以是$1-$9，在替换文本里, 脚本用 $1 和 $2 表示正则表达式中的小括号匹配项的结果

看例子↓

var re = /(\w+)\s(\w+)/;
var str = 'John Smith';
str.replace(re, '$2, $1'); // "Smith, John"
RegExp.$1; // "John"
RegExp.$2; // "Smith"

　$1就是对应正则里第一个小括号匹配的值，后面以此递增

那如果我们多写了一个呢，看下↓

str.replace(re, '$2, $1, $3')
// "Smith, John, $3"

　　他就会以字符串的形式替换上，没有对应的匹配内容，因为前面正则只有两个小括号分组

　

三：函数操作

replace方法的第二个参数也可以是一个函数,形如：

stringObject.replace(regexp/substr,function(){});

这个函数应该有个return值，表示应该被替换的匹配项。

下面会根据正则的匹配项和捕获组，分2种情况，总结第二个参数function的具体用法。

情况1.当只有一个匹配项的（即与模式匹配的字符串）情况下，会向该函数传递三个参数：模式的匹配项，模式匹配项在字符串中的位置和原始字符串，形如：

stringObject.replace(
	regexp/substr,
	function(match,pos,originalText){}
);

　　例子↓

var str = "{a},{b}";
str.replace(/\{\w+\}/g,(match,pos,original)=>{
	console.log(match);
	console.log(pos);
	console.log(original)
})

输出结果是：
{a}
0
{a},{b}
{b}
4
{a},{b}

　　情况2.在正则表达式中定义了多个捕获组的情况下，传递给函数的参数依次是模式的匹配项，第一个捕获组的匹配项，第二个捕获组的匹配项……，但是，最后两个参数依然是模式的匹配项在字符串中的位置和原始字符串。

例子↓

var str = "{a},{b}";
str.replace(/\{(\w+)\}/g,(match,capture,pos,original)=>{
	console.log(match);
	console.log(capture);
	console.log(pos);
	console.log(original)
})

输出结果是：
{a}
a
0
{a},{b}
{b}
b
4
{a},{b}

　　其实我们还可以用es6的新语法这样写↓