一、简介
在 ECMAScript 2021 (ES12) 中，新增了一个方法 String.prototype.matchAll ，它可以方便地在字符串中匹配所有的正则表达式。
在之前的版本中，我们只能使用 String.prototype.match ，它只能匹配第一个符合条件的子串，并返回一个数组，在匹配到第一个符合条件的子串之后就会停止匹配。
这样的局限性让我们很难在一个较长的 String 中找到需要的信息，如在 html 代码中获取所有的 img 标签以及其 src 快照。
String.prototype.matchAll 就是为了解决这个问题而出现的，它可以返回所有符合正则表达式的子串，并提供了一个遍历器，以便我们能够遍历所有匹配到的子串。
二、使用方法
String.prototype.matchAll 的语法如下：
string.matchAll(regexp)
其中，regexp 是一个正则表达式对象，string 是需要匹配的字符串。
该方法返回一个包含所有匹配结果的遍历器对象，我们需要使用 for...of 循环遍历这个遍历器对象才能获取到所有的结果。
三、示例代码
比如，在如下的 html 代码中获取所有的 img 标签以及其 src 快照：
<div>
<img src="https://example.com/image1.jpg" />
<img src="https://example.com/image2.jpg" />
<p>其他内容</p>
<img src="https://example.com/image3.jpg" />
</div>可以使用如下的代码来获取所有的 img 标签及其 src 快照：
// javascriptcn.com 代码示例
const html = document.getElementsByTagName('div')[0].innerHTML;
const regexp = /<img([^>]+?)>/g;
const matches = html.matchAll(regexp);
for (const match of matches) {
const imgTag = match[0];
const srcMatch = /\bsrc="([^"]+)"/.exec(imgTag);
const src = srcMatch ? srcMatch[1] : '';
console.log(`img tag: ${imgTag}, src: ${src}`);
}上述代码通过匹配 html 代码中所有的 img 标签，并遍历匹配结果，提取每个 img 标签的 src 属性，并打印到控制台上。
四、注意事项
注意到 matchAll 方法返回的遍历器对象并不是一个数组，它是一个包含多个匹配结果的对象，因此不能直接进行数组的操作。如果需要使用数组的操作方法，需要将遍历器对象转换成数组。
同时需要注意的是，matchAll 方法在不同的浏览器中的兼容性可能不尽相同。在使用时需要特别注意。
五、总结
String.prototype.matchAll 方法为字符串的正则匹配提供了更加便捷和高效的方式，让我们能够更加便捷地获取字符串中所需要的信息。虽然这个方法在某些浏览器中可能并不支持，但是它所提供的便利性还是值得我们尝试的。
希望本文能够对大家学习和掌握 ES12 中的 String.prototype.matchAll 方法有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653111737d4982a6eb2ace2d