ES11 中的 String.prototype.matchAll()—— 让正则匹配效率成倍提升
在前端开发中，正则表达式是无处不在的工具。在复杂的文本分析和替换任务中，正则表达式提供了强大的工具和语法。而 ES11 中新增的 String.prototype.matchAll() 方法，为正则表达式匹配提供了一个高效的解决方案。
简介
在 ES11 中，String 对象新增了一个名为 matchAll 的方法。该方法接收一个正则表达式，返回一个迭代器对象。该迭代器对象可以通过 for...of 循环进行遍历，每次返回一个匹配结果的数组，其中第一个元素是匹配的全文字符串，后面依次是个捕获组（如果有的话）的值。
该方法返回的迭代器对象可以用来对文本中的所有匹配进行迭代，而不需要使用全局匹配 g 标志。这极大地提高了正则表达式执行的效率和性能。
语法：
string.matchAll(regexp)
参数：
regexp：正则表达式。
返回值：
一个包含所有结果匹配结果的迭代器对象。
示例
下面，我们来看一个具体的示例，了解 String.prototype.matchAll() 的工作原理和应用场景。
假设我们有一段 HTML 文本，需要解析出其中所有链接的地址和文本，并生成一个链接列表。传统的做法是使用正则表达式去匹配，然后遍历所有的匹配结果进行解析，比如：
const linkPattern = /<a href="([^"]+)">([^<]+)</a>/g;
const htmlText = <div><a href="https://www.google.com">Google</a><a href="https://www.bing.com">Bing</a></div>;
const links = [];
let match;
while (match = linkPattern.exec(htmlText)) {
links.push({
url: match[1],
text: match[2]
});
}
// links = [{url: "https://www.google.com", text: "Google"}, {url: "https://www.bing.com", text: "Bing"}]
使用 String.prototype.matchAll()，只需要一行代码，即可轻松解析出所有链接：
const linkPattern = /<a href="([^"]+)">([^<]+)</a>/g;
const htmlText = <div><a href="https://www.google.com">Google</a><a href="https://www.bing.com">Bing</a></div>;
const links = [...htmlText.matchAll(linkPattern)].map(match => ({
url: match[1],
text: match[2]
}));
// links = [{url: "https://www.google.com", text: "Google"}, {url: "https://www.bing.com", text: "Bing"}]
可以看到，使用 matchAll 方法，我们可以直接将结果转换成数组，并对数组进行常见操作，并且不必担心正则表达式的全局标志 g 对结果的影响。这大大简化了代码，提高了效率。
总结
String.prototype.matchAll() 方法是 ES11 中新增的一个非常实用的正则表达式方法。它可以让文本匹配更加高效，可以直接迭代所有匹配结果，而不必担心全局标志带来的复杂性和性能问题。在实际开发中，使用 matchAll 方法可以大大简化代码，提高程序的效率和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653dbcf87d4982a6eb7723e4