在现代前端开发中，我们经常需要处理文本或字符串，而其中一个常见的需求就是查找所有匹配项。ES11 中新加入的 matchAll() 方法可以帮助我们实现这一需求，并大大提高代码的简洁度和可读性。本文将为大家详细介绍 matchAll() 方法的使用方法和注意事项。
matchAll() 方法的基本介绍
matchAll() 方法是 String 类型的原型方法，它返回一个生成器对象，该对象包含一个字符串中所有匹配的结果，并可以迭代获取每一个匹配项。与 match() 方法不同的是，matchAll() 方法可以查找到所有匹配项，而不仅仅是第一个匹配项。
matchAll() 方法需要一个正则表达式作为参数，可以带有 g 全局标志。例如：
----- --- - ------- -------- ----- ------- - ---------- ----- ------ - ---------------------- --------------------
输出：
------ ------ -------- --
上面的代码中，result 是一个生成器对象，它包含了字符串 str 中所有匹配 pattern 正则表达式的结果。这里需要注意的是，result 并不是一个数组，而是一个可迭代的对象。我们可以使用 for...of 循环来获取 result 中的每一个匹配项。
使用 matchAll() 方法获取匹配项
生成器对象中包含的元素是一个由 groups 属性和 index 属性组成的数组，其中 groups 属性包含了分组捕获的结果。例如：
----- --- - ------- -------- ----- ------- - ---------- ----------- ----- ------ - ---------------------- --- ------ ----- -- ------- - -------------------------- -
输出：
--- ------- -------- -- -------- -- --------
上面的代码中，我们采用正则表达式 /([a-z]+), ([a-z]+)/g 来匹配字符串 str。由于正则表达式中使用了两个分组，因此 match.groups 属性中包含了两个键值对。其中键为分组的序号，值为分组匹配的结果。
匹配所有子匹配项
我们还可以使用 matchAll() 方法来获取正则表达式中所有子匹配项的结果。只需要在正则表达式中使用 lookbehind/lookahead 或者不捕获分组来实现。例如：
----- --- - -- ------- - -------- - -------- ----- ------- - -------------------- ----- ------ - ---------------------- --- ------ ----- -- ------- - ---------------------- -
输出：
- - -
上面的代码中，我们使用正则表达式 /\d+\s+(?=[a-z]+)/g 来匹配数字和空格之后的水果名称。正则表达式中使用了 lookahead 分组来匹配水果名称，由于 lookahead 分组不会捕获匹配的内容，因此 match[0] 中保存的是数字和空格的结果。
总结
matchAll() 方法是一个非常实用的字符串处理方法，它可以帮助我们快速地查找字符串中所有匹配项，解决一些繁琐的字符串处理问题。但需要注意的是，matchAll() 方法返回的是一个可迭代的结果，我们需要使用 for...of 循环来遍历匹配结果，并使用数组或对象的语法来获取匹配结果的某一个值。同时，我们也需要慎重使用正则表达式中的分组，确保正则表达式可以正确地匹配需要的结果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64817c1048841e98940f6101