正则表达式是前端开发中常用的工具之一，可以用于匹配、替换、提取字符串等操作。在 ECMAScript 2020 中，新增了一个 MatchAll 方法，可以更好地使用正则表达式。
MatchAll 方法的用法
MatchAll 方法是 RegExp 对象的一个方法，用于返回一个迭代器，可以遍历字符串中所有匹配正则表达式的子串。它的用法如下：
----- ------ - --------- ----- --- - ---- ---- ----- -------- ----- -------- - --------------------- --- ------ ----- -- --------- - ------------------- -
上面的代码中，我们定义了一个正则表达式 /a(b)c/g，它用于匹配字符串中的 abc、abbc、abbbc、abbbbc 等子串。然后使用 str.matchAll(regexp) 方法获取一个迭代器，遍历其中的每个匹配结果并打印。
运行结果如下：
- ------ ---- ------ -- ------ ---- ---- ----- -------- ------- --------- - - ------- ---- ------ -- ------ ---- ---- ----- -------- ------- --------- - - -------- ---- ------ -- ------ ---- ---- ----- -------- ------- --------- - - --------- ---- ------ --- ------ ---- ---- ----- -------- ------- --------- -
从结果可以看出，MatchAll 方法返回的是一个迭代器，每个迭代值都是一个数组，包含了匹配到的子串、捕获组中的内容、匹配到的位置等信息。
需要注意的是，MatchAll 方法返回的迭代器是惰性求值的，即只有在遍历时才会开始匹配。如果不遍历迭代器，正则表达式不会被执行。
MatchAll 方法的兼容性
MatchAll 方法是 ECMAScript 2020 中新增的方法，目前主流浏览器的最新版本都已经支持。但是，如果需要兼容较老的浏览器，可以使用 polyfill 的方式进行兼容。
-- ---------------------------- -
------------------------- - ---------------- -
----- ------- - ---
-------------------- ---------- -
-----------------------------
---
------ ---------------------------
--
-上面的 polyfill 实现了一个 matchAll 方法，使用方式与原生的 MatchAll 方法相同，但是在不支持 MatchAll 方法的浏览器中也可以使用。
MatchAll 方法的示例
下面我们来看一个更实际的例子，使用 MatchAll 方法匹配 HTML 代码中的所有链接。假设我们有以下 HTML 代码：
---- ------ ------------------------------------------ ------ --------------------------------------------- ------ ----------------------------------------- -----
我们可以使用以下代码来匹配其中的链接：
----- ---- - ----------- ------------------------------------------------ --------------------------------------------------- ------------------------------------------------ ----- ------ - ----------------------------------------- ----- ----- - --- --- ------ ----- -- ---------------------- - --------------------- - -------------------
上面的代码中，我们定义了一个正则表达式 /\<a\s+(?:[^\>]*?\s+)?href=(["'])(.*?)\1/g，它用于匹配 HTML 代码中的链接。然后使用 html.matchAll(regexp) 方法获取一个迭代器，遍历其中的每个匹配结果并将链接存入数组中。
运行结果如下：
- ------------------------ ------------------------- ---------------------- -
从结果可以看出，我们成功地匹配了 HTML 代码中的所有链接，并将它们存入了一个数组中。
总结
MatchAll 方法是 ECMAScript 2020 中新增的方法，可以更好地使用正则表达式。它返回一个迭代器，可以遍历字符串中所有匹配正则表达式的子串。MatchAll 方法的用法简单，但是需要注意它是惰性求值的。在实际开发中，MatchAll 方法可以用于匹配 HTML 代码中的链接、提取 JSON 数据中的某个字段等场景。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65824fcfd2f5e1655dd72816