在 ES2020 中，新增了 String#matchAll 方法，它可以让我们更加灵活地处理正则表达式匹配的结果。在本文中，我们将深入探讨这个新特性，并且提供实际应用的示例代码，帮助读者更好地理解和应用这个功能。
String#matchAll 方法的用法
String#matchAll 方法的用法非常简单，它接收一个正则表达式参数，返回一个迭代器对象。我们可以通过 for...of 循环来遍历这个迭代器对象，获取所有匹配的结果。
下面是一个简单的示例代码：
const str = 'hello world';
const regex = /l/g;
const matches = str.matchAll(regex);
for (const match of matches) {
console.log(match);
}输出结果如下：
["l", index: 2, input: "hello world", groups: undefined] ["l", index: 3, input: "hello world", groups: undefined]
我们可以看到，这个迭代器对象返回了两个匹配结果，每个匹配结果都是一个数组，包含匹配到的字符串、匹配到字符串的起始位置、原始字符串以及匹配到的分组（如果有的话）。
String#matchAll 方法的优势
相比于之前的 String#match 方法，String#matchAll 方法有以下优势：
- 返回结果更加详细：String#match 方法只返回第一个匹配结果，而 String#matchAll 方法可以返回所有匹配结果。
- 支持迭代器：String#matchAll 方法返回一个迭代器对象，可以通过 for...of 循环来遍历所有匹配结果。
- 支持分组匹配：String#matchAll 方法可以返回分组匹配的结果，这对于复杂的正则表达式非常有用。
实际应用示例
下面是一个实际应用的示例代码，它演示了如何使用 String#matchAll 方法来提取 HTML 文档中所有的链接：
// javascriptcn.com 代码示例
const html = `
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>Here are some links:</p>
<ul>
<li><a href="https://example.com">Example</a></li>
<li><a href="https://google.com">Google</a></li>
<li><a href="https://facebook.com">Facebook</a></li>
</ul>
</body>
</html>
`;
const regex = /<a\s+(?:[^>]*?\s+)?href=(["'])(.*?)\1/g;
const matches = html.matchAll(regex);
for (const match of matches) {
console.log(match[2]);
}输出结果如下：
https://example.com https://google.com https://facebook.com
在这个示例中，我们使用了一个正则表达式来匹配 HTML 文档中的链接。这个正则表达式比较复杂，它可以匹配单引号或双引号包裹的 href 属性值，并且支持空格等其他属性。
通过使用 String#matchAll 方法，我们可以将所有匹配结果都提取出来，并打印出链接地址。
总结
ES2020 中的 String#matchAll 方法为我们处理正则表达式匹配结果提供了更加灵活的方式。通过使用它，我们可以轻松地获取所有匹配结果，并且支持分组匹配等更加复杂的场景。在实际应用中，我们可以通过这个新特性来更加方便地处理字符串。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6506881695b1f8cacd25ab6c