正则表达式在前端开发中起到了非常重要的作用，它可以用来校验表单数据、解析 URL、提取 HTML 标签等等。但是在实际使用中，我们会遇到一个非常麻烦的问题：如何捕获全局匹配？
在过去，我们可以使用String.prototype.match方法来实现正则表达式的匹配操作。但是，match只能返回第一个匹配项，无法匹配全局。这就需要我们手动使用RegExp对象的global属性，并在while循环中使用exec方法来获取所有匹配项。这样既麻烦又容易出错。
为了解决这个问题，ES12 中添加了String.prototype.matchAll方法，该方法可以返回一个迭代器，用于遍历所有匹配项。
使用 String.prototype.matchAll 方法
String.prototype.matchAll方法接受一个正则表达式作为参数，返回一个匹配结果的迭代器。下面是一个简单的示例，演示如何使用该方法：
const str = 'Hello World! How are you?';
const regex = /[a-z]+/g;
for (const match of str.matchAll(regex)) {
console.log(match);
}上述代码会输出以下结果：
["ello", index: 1, input: "Hello World! How are you?"] ["orld", index: 2, input: "Hello World! How are you?"] ["ow", index: 10, input: "Hello World! How are you?"] ["are", index: 14, input: "Hello World! How are you?"] ["you", index: 18, input: "Hello World! How are you?"]
可以看到，使用String.prototype.matchAll方法，我们可以遍历所有匹配项，并且每个匹配项都包含了其索引和匹配的字符串。
捕获分组
在正则表达式中，我们还可以使用捕获分组，来获取匹配项中的特定部分。以邮箱地址为例，我们可以把邮件地址分为用户名、域名、顶级域名三个部分：
const email = 'johndoe@example.com'; const regex = /(\w+)@([\w.]+)(\.\w+)/; const [, username, domain, tld] = email.match(regex); console.log(username, domain, tld);
上述代码会输出johndoe example .com。但是，如果使用matchAll方法，我们就可以更方便地获取匹配项中的所有分组。修改上面的示例代码，使用matchAll方法来匹配邮箱地址：
const email = 'johndoe@example.com';
const regex = /(\w+)@([\w.]+)(\.\w+)/g;
for (const match of email.matchAll(regex)) {
const [, username, domain, tld] = match;
console.log(username, domain, tld);
}上述代码会输出以下结果：
johndoe example .com
可以看到，使用matchAll方法，我们可以直接在循环中获取匹配项中的所有分组，避免了手动调用exec方法的麻烦。
总结
使用 ES12 中的String.prototype.matchAll方法，我们可以轻松地实现正则表达式的全局匹配，并且可以方便地获取匹配结果中的捕获分组。这一功能在日常开发中非常实用，可以帮助我们简化代码，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a1e93148841e9894e27d33