字符串 replaceAll

程序员的生活
593 阅读3分钟

这是我参与11月更文挑战的第28天，活动详情查看：2021最后一次更文挑战。

前言

ECMAScript 6.0 简称ES6 , 是 JavaScript 语言的新一代的标准，于在 2015 年 6 月发布，正式名称就是《ECMAScript 2015 标准》。一般情况，泛指， 5.1版以后的标准，涵盖了 ES2015、ES2016、ES2017、ES2018、ES2019、ES2020、ES2021 等等

我们一起来学习:

  • String.prototype.matchAll

String.prototype.replace

我们来看一个例子，我们需要把所有的数字变成 * 号：

const text = '我的电话号码是 13100000000'
console.log(text.replace(/\d/, '*'));

// 我的电话号码是 *3100000000

上面的代码只会把第一个匹配的数字变成 *号，而其他的并未受到影响，在ES6之前，我们也可以通过g修饰符, 其表示全局搜索。

const text = '我的电话号码是 13100000000'
console.log(text.replace(/\d/g, '*'));

// 我的电话号码是 ***********

ES6引入String.prototype.replaceAll，更加显示的提示了其作用。

replaceAll 第一个参数

replaceAll的第一个参数可以是字符串，也可是正则。

const text = '我的电话号码是 13100000000'
console.log(text.replaceAll("0", '*'));
// 我的电话号码是 131********


const text = '我的电话号码是 13100000000'
console.log(text.replaceAll(/\d/, '*'));

// 我的电话号码是 ***********

结果：
VM1705:2 Uncaught TypeError: String.prototype.replaceAll called with a non-global RegExp argument at String.replaceAll (<anonymous>) at <anonymous>:2:18

他告诉我我们必须带着g修饰符，

const text = '我的电话号码是 13100000000'
console.log(text.replaceAll(/\d/g, '*'));

我的电话号码是 ***********

replaceAll第二个参数的特殊值

  • $&： 匹配的字符串

$& 表示匹配的字符串 ,原封的不动的返回，就等于没有替换

const text = '我的电话号码是 13100000000'
console.log(text.replaceAll(/\d/g, '$&'));
// 我的电话号码是 13100000000

我们稍微修改一下，在后面加一个_，相当于每个数字后面加了一个_

const text = '我的电话号码是 13100000000'
console.log(text.replaceAll(/\d/g, '$&_'));
// 我的电话号码是 1_3_1_0_0_0_0_0_0_0_0_
  • $` ：匹配结果前面的文本。 我们匹配到人，把其替换为前面的文本，即好，于是变为好好。
const text = '好人'
console.log(text.replaceAll(/人/g, '$`'));
// 好好

注意了，这每一次匹配，前面的文本都是不一样的，我们看看多次匹配的情况。

// 第一次匹配a, 前面的字符为 ''
// 第二次匹配b, 前面的字符为 'a'
// 第三次匹配c, 前面的字符为 'ab'
const text = 'abc'
console.log(text.replaceAll(/[a-z]/g, '$`') // 
// aab
a  b   c
a  a   ab => aaab
  • $'：匹配结果后面的文本。
    这个和$` 很类似，我们看个简单的例子吧
"好人".replaceAll(/好/g, "$'") // 人人
  • $n：匹配成功的第n组内容。第一个参数必须是正则表达式时有效。 n从1开始。
    我们看把好人坏人对调的例子
"好人坏人".relaceAll(/(好人)(坏人)/, "$2$1")
// '坏人好人'
  • $$：指代美元符号$。 在最新版本的chrome浏览器，其实也是可以使用单个 $符号的
"人".replaceAll(/人/g, "$")  // "$"
"人".replaceAll(/人/g, "$$")  // "$$"

image.png

replaceAll第二个参数是函数

说到函数，必然会说参数：

replacer(match, p1, p2, p3, offset, string)

  • match: 匹配的内容
  • p1, p2, p3: 匹配的分组，多少个分组，就多少个p
  • offset: 内容在整个字符串中的位置
  • string: 原字符串
function replacer(match, p1, p2, offset, string){
 console.log("match:", match);
 console.log("p1:", p1);
 console.log("p2:", p2);
 console.log("offset:", offset);
 console.log("string:", string);
}

"好人坏人啊".replaceAll(/(好人)(坏人)/g, replacer);

// match: 好人坏人
// p1: 好人
// p2: 坏人
// offset: 0
// string: 好人坏人啊

'undefined啊'

再看一个匹配有分割的情况，没有分组，有多次匹配

function replacer(match,offset, string){
 console.log("match:", match);
 console.log("offset:", offset);
 console.log("string:", string);
}

"1_2".replaceAll(/\d/g, replacer);

// match: 1
// offset: 0
// string: 1_2
// match: 2
// offset: 2
// string: 1_2

'undefined_undefined'

小结

今天你收获了吗？

avatar
文章
阅读
粉丝