正则表达式是前端开发中必不可少的一部分，但它常常被认为是难以理解和难以使用的。随着ECMAScript 2021 （ES12）的发布，新增了一个matchAll方法，使正则表达式更易于操作。
什么是 matchAll 方法
matchAll方法是ES12中新增的String.prototype方法，可以在字符串上使用该方法来匹配所有符合正则表达式的字符串。match方法只会返回第一个符合正则表达式的字符串，而matchAll则会返回所有匹配的字符串，并且返回的是一个可迭代对象，可以使用for…of语句来访问每个匹配项。
如何使用 matchAll 方法
以下是使用matchAll方法的基本语法：
string.matchAll(regexp);
其中regexp是一个正则表达式。返回的是一个可迭代对象，可以像下面这样来使用：
const str = "Hello World";
const regexp = /l/g;
const matches = str.matchAll(regexp);
for (const match of matches) {
console.log(match[0], match.index);
}在上面的示例中，我们定义了一个字符串和一个正则表达式并使用该正则表达式调用matchAll方法。接下来，我们可以使用for...of循环来访问每个匹配项。打印出三个匹配项，每个匹配项包含了该匹配项所在的索引及其对应的字符串。
示例
我们可以使用 matchAll 方法来优化一个搜索功能，例如在以下的HTML结构中搜索所有的div元素：
<div class="container"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> </div>
首先，我们可以使用querySelectorAll 方法来获取所有的div元素：
const divs = document.querySelectorAll("div");接下来我们使用 matchAll 方法在所有div元素的innerHTML中搜索某个关键词（例如“item”）：
-- -------------------- ---- -------
----- ----- - ---------
--- ------ --- -- ----- -
----- ------- - ------------------------------
--- ------ ----- -- -------- -
----- ---- - -------------------------------
---------------- - ---------
--------------------------------
---------------------- ----------
-
-在上述示例中，我们遍历所有的div元素，并使用matchAll方法在innerHTML中匹配所有符合正则表达式regex的字符串。然后，我们迭代访问每个匹配项，并替换原始的匹配项，将它们替换为一个新的span元素。
结论
使用ECMAScript 2021中新增的matchAll方法可以更加容易地操作和处理正则表达式。该方法可以既提高开发效率，也可以帮助避免手动编写冗长、复杂的正则表达式。当您需要从字符串中提取或匹配多个子字符串时matchAll方法会特别有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672a52d6ddd3a70eb6cfa986