在 ECMAScript 2018 中，新增了一个非常有用的 String 方法：matchAll()。这个方法可以帮助我们在字符串中匹配所有符合条件的子串，并返回一个迭代器对象。本文将详细介绍 matchAll() 方法的使用方法和示例代码，并希望能对前端开发者有所帮助。
matchAll() 方法的介绍
matchAll() 方法是 String 对象的一个原型方法，用于在字符串中查找与正则表达式匹配的所有子串，并返回一个迭代器对象。该迭代器对象包含了所有匹配的子串及其相关信息，如匹配的字符串、匹配的位置等。
matchAll() 方法的语法如下：
string.matchAll(regexp);
其中，regexp 是一个正则表达式，用于匹配字符串中的子串。
matchAll() 方法的返回值
matchAll() 方法返回一个迭代器对象，这个对象包含了所有匹配的子串及其相关信息。迭代器对象可以通过 for...of 循环遍历，每次遍历返回一个匹配的结果对象，这个对象包含了以下属性：
- match：匹配的子串。
- groups：一个对象，包含了所有具名捕获组的匹配结果。
- index：匹配的子串在原字符串中的位置。
- input：原字符串。
下面是一个示例代码，演示如何使用 matchAll() 方法获取所有匹配的子串及其相关信息：
const str = 'Hello, world! How are you?';
const regexp = /\w+/g;
const matches = str.matchAll(regexp);
for (const match of matches) {
console.log(match);
}运行上面的代码，输出结果如下：
-- -------------------- ---- ------- - ------ -------- ------- --- ------ -- ------ ------- ------ --- --- ----- - - ------ -------- ------- --- ------ -- ------ ------- ------ --- --- ----- - - ------ ------ ------- --- ------ --- ------ ------- ------ --- --- ----- - - ------ ------ ------- --- ------ --- ------ ------- ------ --- --- ----- - - ------ ------ ------- --- ------ --- ------ ------- ------ --- --- ----- -
从上面的输出结果可以看出，matchAll() 方法返回的迭代器对象包含了所有匹配的子串及其相关信息。
示例代码
下面是一些示例代码，演示 matchAll() 方法的使用方法和一些常见的应用场景。
获取 URL 中的参数
-- -------------------- ---- ------- ----- --- - ----------------------------------- ----- ------ - --------------------- ----- ------ - --- --- ------ ----- -- --------------------- - ---------------- - --------- - -------------------- -- - -- ---- -- ---- -- --- -
上面的代码演示了如何使用 matchAll() 方法获取 URL 中的参数列表，并将其存储在一个对象中。
获取 HTML 中的所有链接
-- -------------------- ---- -------
----- ---- - -
----
------ --------------------------------------------
------ ------------------------------------------
------ ----------------------------------------------
-----
--
----- ------ - --- ------------------------------
----- ----- - ---
--- ------ ----- -- ---------------------- -
------------
---- ---------
----- ---------
---
-
-------------------上面的代码演示了如何使用 matchAll() 方法获取 HTML 中的所有链接，并将其存储在一个数组中。
统计字符串中单词的出现次数
-- -------------------- ---- ------- ----- --- - ----- -- - ----- ---- -- ---- - ------- ----- ------ - ----------- ----- ---------- - --- --- ------ ----- -- --------------------- - ----- ---- - --------- ---------------- - ----------------- -- -- - -- - ------------------------ -- - ----- -- --- -- -- -- ----- -- ----- - -
上面的代码演示了如何使用 matchAll() 方法统计字符串中单词的出现次数，并将其存储在一个对象中。
总结
matchAll() 方法是 ECMAScript 2018 中新增的一个非常有用的 String 方法，可以帮助我们在字符串中匹配所有符合条件的子串，并返回一个迭代器对象。本文介绍了 matchAll() 方法的使用方法和示例代码，并希望能对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651631f995b1f8cacde8555a