在前端开发中，处理字符串是一个很常见的任务。正则表达式则是用于处理字符串的重要工具。在 ES12 中，新增了 String.prototype.matchAll 方法用于解决匹配全局正则表达式的问题。
什么是全局正则表达式
在 JavaScript 中，正则表达式对象可设置为全局匹配。全局正则表达式是指一个正则表达式匹配一个字符串时，从字符串的开头到结尾一直匹配到所有匹配结果的过程。在正则表达式字符串末尾可以加上 g 标识表示全局匹配。
例如：
const str = 'I love JavaScript. JavaScript is awesome!'; const regex = /JavaScript/g; const matches = str.match(regex); console.log(matches); // ["JavaScript", "JavaScript"]
在上述代码中，我们创建了一个正则表达式对象 regex，它指定了 g 标识，表示全局匹配。接着我们使用 match 方法对字符串 str 进行匹配，返回了一个数组 matches，其中包含了所有匹配的结果。
全局正则表达式的问题
使用全局正则表达式时，我们需要注意以下问题：
- 无法获取所有的捕获组结果
- 无法获取字符的位置信息
- 在多次执行正则表达式的过程中，正则表达式对象的
lastIndex属性可能会改变
因此，全局正则表达式的使用存在一定的局限性。
使用 String.prototype.matchAll 方法解决问题
ES12 中新增了 String.prototype.matchAll 方法，用于解决全局正则表达式的问题。该方法可以一次性获取所有匹配结果，而且每个匹配结果都包含了字符的位置信息和捕获组结果。
例如，我们可以使用 matchAll 方法获取上面示例中的所有匹配结果：
-- -------------------- ---- ------- ----- --- - -- ---- ----------- ---------- -- ---------- ----- ----- - -------------- ----- ------- - ------------------------- --------------------- -- - -- -------------- ------ -- ------ -- ---- ----------- ---------- -- ----------- -- -------------- ------ --- ------ -- ---- ----------- ---------- -- ---------- -- -
在上述代码中，我们将 matchAll 方法返回的迭代器对象转为数组，得到了包含两个匹配结果的数组。
每个匹配结果都是一个数组，其中第一个元素是匹配的字符串，其余元素则是捕获组的结果。此外，每个匹配结果还有两个属性 index 和 input，分别表示匹配结果的起始位置和匹配的字符串。
使用 String.prototype.matchAll 方法的注意事项
matchAll方法返回的是迭代器对象而非数组，需要使用迭代器的方式获取所有匹配结果。- 由于
matchAll方法是 ES12 新增的方法，部分浏览器暂未支持。
示例代码
-- -------------------- ---- ------- ----- --- - -- ---- ----------- ---------- -- ---------- ----- ----- - -------------- ----- ------- - ------------------------- --------------------- -- - ----- -------- ---------- - ------ -- --------------- ------------------------------------------------------------------------------------- ---
以上示例代码将 matches 进行遍历，输出每个匹配结果的匹配字符串、捕获组结果和开始位置。
总结
在本文中，我们介绍了全局正则表达式存在的问题并介绍了 ES12 中的 String.prototype.matchAll 方法。该方法可以解决全局正则表达式的问题，并且提供了字符位置和捕获组结果。需要注意的是，该方法返回的是迭代器对象，需要使用迭代器的方式获取所有匹配结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c6476968c7c53b0774210