正则替换字符串replace()方法超详细用法

replace()方法介绍

replace()方法执行搜索替换操作。
它接收一个正则表达式作为第一个参数, 接收一个替换字符串作为第二个参数。
它搜索调用它的字符串, 寻找与指定模式匹配的文本。
如果正则表达式带g标志, replace()方法会替换字符串中的所有匹配项; 否则, 它只替换第一个匹配项。
如果replace()方法的第一个参数是一个字符串而非正则表达式, 这个方法会按照字面值进行搜索。

简单用法

let text = 'my name is hu,you NAME is zhang';

// 因为字符串是不可修改的对象所以要赋值给一个新变量, 也可以对其重新赋值
text = text.replace(/name/gi,'like'); // 标志g表示全局匹配,标志i表示不区分大小写

console.log(text); // my like is hu,you like is zhang

不过replace()方法的能力远不止这些。比如在正则表达式中用括号()分组的子表达式是从左到右编号的, 而且正则表达式能记住每个子表达式匹配的文本。如果替换字符串中出现了$符号后面跟一个数字(例如$1代表第一组子表达式), replace()会将这两个字符替换为指定的子表达式匹配的文本。

let str = 'abcdeABCDE';

// 其中$1代表第一组(b),$2代表第二组(c)
str = str.replace(/(b)(c)/gi,'b$1bc$2c');  // 给b两边来个b,给c两边来个c

console.log(str); // abbbcccdeAbBbcCcDE

如果正则表达式中使用的是命名捕获组, 则可以通过名字而非数字来引用匹配的文本, 如果使用命名捕获组就要把名字写到$<名字>中:

let str = 'abcdABCD';
str = str.replace(/(?<group1>bc)/gi,'[$<group1>]'); // 给bc套个中括号
console.log(str); // a[bc]dA[BC]D

重点:函数替换

除了给replace()的第二个参数传替换字符串, 还可以传一个函数, 这个函数会被调用然后用来计算替换的值, 如果匹配到多个值则会对每个值进行一次计算替换。这个替换函数在被调用时会接收几个参数, 第一个参数是匹配的整个文本:

let str = '小明有-100元,小李有5元,小张有-10元';
// 对其中的钱进行绝对值操作
str = str.replace(/-?\d+/g,function(s){
	let num = parseInt(s);
	if(num < 0){
		// 如果小于0就让它乘-1
		num *= -1; 
	}
	// 返回结果对其进行替换
	return num;
})
console.log(str); // 小明有100元,小李有5元,小张有10元

然后, 如果正则表达式有捕获组, 则后面几个参数分别是这些捕获组匹配的子字符串。对以上代码进行修改:

let str = '小明有-100元,小李有5元,小张有-10元';
// 对其中的钱进行绝对值操作
str = str.replace(/(\d+)|(-\d+)/g,function(s,first,last){ 
	// s代表匹配的整个字符串,first代表第一组为正数,last代表第二组为负数
	if(first){
		// 如果正数直接返回
		return first;
	}else{
		// 如果负数让其乘-1
		return parseInt(last)*-1;
	}
})
console.log(str); // 小明有100元,小李有5元,小张有10元