JS replaceAll 和 matchAll 使用指南不指北-工具盒子

封面图-纸飞机

一、先说下 replaceAll

replaceAll 这个 API 是最近一两年新出来的 API，可能某些浏览器，例如360极速版之类的并不支持（虽然使用的是 Chromium 内核，但版本太老），以及部分老旧的 Android 设备。

这个 API 我可是喜欢的很，可以轻松解决以前一些比较头疼的字符串处理需求。

比方说搜索关键字的高亮匹配。

就像下图所示这样，搜索字母 x，结果本人名字有两个字的拼音与之相符：

名字高亮

咦？不对不对，不是这个，应该是叠词匹配，也就是假设我的名字叫做：张鑫鑫，则搜索"鑫"的时候应该两个字都高亮。

上面的图我P下，稍等......

字符匹配

如果只是匹配一个字符，直接使用 replace 就可以了，简单到爆炸。

name = name.replace('鑫', '<mark>鑫</mark>');

可要是希望所有的"鑫"字都高亮，replace 就从老六变成二五仔了，只能使用正则进行替换了，由于用户输入框输入的内容是动态的，所以，只能使用 new RegExp() 实现。

// 实际开发，new RegExp() 中  
name = name.replace(new RegExp('鑫', 'g'), '<mark>鑫</mark>');

然而使用RegExp使用有两大缺点：

难，新人表示臣妾记不住啊，每次使用都要看看语法是什么，哪像replace方法这么通俗易懂。
烦，动态输入内容不可控，要是有特殊字符，还需要转义，不然作为 RegExp 的参数会有问题。

好在现在有了 replaceAll 方法，就可以轻松替换所有匹配的字符串了，简单到爆炸+1。

name = name.replaceAll('鑫', '<mark>鑫</mark>');

二、replaceAll的语法和细节

语法

replaceAll 语法和 replace 一样，均支持字符串替换或者正则替换：

replaceAll(pattern, replacement)

但是具体细节上会有一些区别。

细节

首先，replaceAll 中的正则表达式中一定要有'g'这个全局标识符，否则会报错。

例如下面的 JS 执行就会报错：

'hello world'.replaceAll(/\s/, '');
// 会报错

Uncaught TypeError: String.prototype.replaceAll called with a non-global RegExp argument

报错提示

其次，和replace方法一样，replaceAll也是连空字符串也能匹配替换的，例如：

'张鑫旭'.replaceAll('', '_')

返回的结果是：'张_鑫_旭'

如下截图所示：

空字符串替换

因此，在实现搜索高亮匹配的时候，如果是空字符串，需要不执行匹配操作，否则会插入很多预期之外的 <mark> 元素。

兼容性

IE浏览器并不支持，其他浏览器均已支持，如下图所示：

replaceAll兼容性

三、再说下 matchAll

matchAll 方法也是最近三年才支持的，支持时间比 replaceAll 方法要早个一年半载。

和 match 方法相比，matchAll 的返回值不仅包括匹配的内容，还包括匹配的分组（也就是正则表达式中括号括起来的部分）。

下面通过一个例子展示下两者的区别。

let str = 'author\'s name is zxx';
const reg = /\s+([a-z]+)/g;
console.log(str.match(reg));
console.log(str.matchAll(reg));

两者的返回值分别是：

match 方法返回：[' name', ' is', ' zxx']
matchAll 返回：RegExpStringIterator，转为数组后值为：
[Array(2), Array(2), Array(2)]
0: (2) [' name', 'name', index: 8, input: "author's name is zxx", groups: undefined]
1: (2) [' is', 'is', index: 13, input: "author's name is zxx", groups: undefined]
2: (2) [' zxx', 'zxx', index: 16, input: "author's name is zxx", groups: undefined]
length: 3

Chrome console面板中执行后的结果示意为：

matchAll 截图示意