在前端处理字符串的工作中,replace函数是最为常用的一种,无论是删除指定字符串还是替换字符串都十分好用。
一般来说我们经常以字符串或者正则来作为它的第一个参数,使用字符串作为它的第二个参数,例如:
let str = 'aaabbbccc';
let str1 = str.replace('a', 'e');
console.log(str1); // eaabbbccc
let str2 = str.replace(/a/g, 'e');
console.log(str2); // eeebbbccc
第二个参数还可以使用特殊变量名:
1. $$:插入一个 "$";
2. $&:插入匹配的子串;
此外,replace函数的第二个参数也可以是一个函数,根据 MDN 上的介绍:
str.replace(regexp|substr, newSubStr|function)
函数的参数包括:
1. match:匹配的子串;
2. p1, p2, ...:第一个参数是一个正则,则代表第 n 个括号匹配的字符串;
3. offset:匹配到的子字符串在原字符串中的偏移量;
4. string:被匹配的原字符串。
当有多个被匹配的对象时,这个函数会被调用多次。我们可以利用这个特性来实现一些需求,比如高亮一个富文本格式生成的文章中的字符,并给第一个字符加上 id:
let is_first_time = true; // 是否为第一次匹配
let html = '...'; // 假装有字符串
let target_str = 'abc'; // 需要高亮的字符
html = html.replace(eval(`/${target_str}/g`), () => {
if (is_first_time) {
is_first_time = false;
return `<span style="color:red" id="target">${target_str}</span>`;
} else {
return `<span style="color:red">${target_str}</span>`;
}
});