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的新语法这样写↓

原文地址:https://www.cnblogs.com/bobo1/p/13298042.html