正则表达式是前端开发中常用的工具之一，可以用于匹配、替换、提取字符串等操作。在 ECMAScript 2020 中，新增了一个 MatchAll 方法，可以更好地使用正则表达式。
MatchAll 方法的用法
MatchAll 方法是 RegExp 对象的一个方法，用于返回一个迭代器，可以遍历字符串中所有匹配正则表达式的子串。它的用法如下：
const regexp = /a(b)c/g;
const str = 'abc abbc abbbc abbbbc';
const matchAll = str.matchAll(regexp);
for (const match of matchAll) {
console.log(match);
}上面的代码中，我们定义了一个正则表达式 /a(b)c/g，它用于匹配字符串中的 abc、abbc、abbbc、abbbbc 等子串。然后使用 str.matchAll(regexp) 方法获取一个迭代器，遍历其中的每个匹配结果并打印。
运行结果如下：
[ 'abc', 'b', index: 0, input: 'abc abbc abbbc abbbbc', groups: undefined ] [ 'abbc', 'b', index: 4, input: 'abc abbc abbbc abbbbc', groups: undefined ] [ 'abbbc', 'b', index: 9, input: 'abc abbc abbbc abbbbc', groups: undefined ] [ 'abbbbc', 'b', index: 15, input: 'abc abbc abbbc abbbbc', groups: undefined ]
从结果可以看出，MatchAll 方法返回的是一个迭代器，每个迭代值都是一个数组，包含了匹配到的子串、捕获组中的内容、匹配到的位置等信息。
需要注意的是，MatchAll 方法返回的迭代器是惰性求值的，即只有在遍历时才会开始匹配。如果不遍历迭代器，正则表达式不会被执行。
MatchAll 方法的兼容性
MatchAll 方法是 ECMAScript 2020 中新增的方法，目前主流浏览器的最新版本都已经支持。但是，如果需要兼容较老的浏览器，可以使用 polyfill 的方式进行兼容。
// javascriptcn.com 代码示例
if (!String.prototype.matchAll) {
String.prototype.matchAll = function(regexp) {
const matches = [];
this.replace(regexp, function() {
matches.push([...arguments]);
});
return matches[Symbol.iterator]();
};
}上面的 polyfill 实现了一个 matchAll 方法，使用方式与原生的 MatchAll 方法相同，但是在不支持 MatchAll 方法的浏览器中也可以使用。
MatchAll 方法的示例
下面我们来看一个更实际的例子，使用 MatchAll 方法匹配 HTML 代码中的所有链接。假设我们有以下 HTML 代码：
<ul> <li><a href="https://www.baidu.com">百度一下</a></li> <li><a href="https://www.google.com">Google</a></li> <li><a href="https://www.bing.com">Bing</a></li> </ul>
我们可以使用以下代码来匹配其中的链接：
// javascriptcn.com 代码示例
const html = '<ul><li><a href="https://www.baidu.com">百度一下</a></li><li><a href="https://www.google.com">Google</a></li><li><a href="https://www.bing.com">Bing</a></li></ul>';
const regexp = /<a\s+(?:[^>]*?\s+)?href=(["'])(.*?)\1/g;
const links = [];
for (const match of html.matchAll(regexp)) {
links.push(match[2]);
}
console.log(links);上面的代码中，我们定义了一个正则表达式 /\<a\s+(?:[^\>]*?\s+)?href=(["'])(.*?)\1/g，它用于匹配 HTML 代码中的链接。然后使用 html.matchAll(regexp) 方法获取一个迭代器，遍历其中的每个匹配结果并将链接存入数组中。
运行结果如下：
[ 'https://www.baidu.com', 'https://www.google.com', 'https://www.bing.com' ]
从结果可以看出，我们成功地匹配了 HTML 代码中的所有链接，并将它们存入了一个数组中。
总结
MatchAll 方法是 ECMAScript 2020 中新增的方法，可以更好地使用正则表达式。它返回一个迭代器，可以遍历字符串中所有匹配正则表达式的子串。MatchAll 方法的用法简单，但是需要注意它是惰性求值的。在实际开发中，MatchAll 方法可以用于匹配 HTML 代码中的链接、提取 JSON 数据中的某个字段等场景。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65824fcfd2f5e1655dd72816