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()内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！