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元
补充：替换特殊字符
要替换特殊字符，例如 -/\\^$*+?.()|[]{})，需要使用反斜杠对其转义。
如果给定字符串 this\\-is\\-my\\-url，要求把所有转义的减号（ \\-）替换为未转义的减号（-）。
可以用 replace() 做到：
const myUrl = 'this\-is\-my\-url';
const newUrl = myMessage.replace(/\\-/g, '-');
console.log(newUrl); // this-is-my-url
或者用new Regexp()：
const myUrl = 'this\-is\-my\-url';
const newUrl = myUrl.replace(new RegExp('\-', 'g'), '-');
console.log(newUrl); // this-is-my-url
在第二个例子中不必用反斜杠来转义反斜杠。
总结
到此这篇关于JS正则表达式替换字符串replace()方法的文章就介绍到这了,更多相关JS正则替换字符串replace()内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
