在 ES12 中，新增了一个 String.prototype.matchAll 方法，它可以用于在字符串中查找所有匹配的正则表达式，返回一个迭代器，方便我们遍历所有匹配结果。本文将详细介绍 matchAll 的用法及其实际应用场景。
基本用法
matchAll 方法接受一个正则表达式作为参数，返回一个迭代器对象。我们可以使用 for...of 循环遍历迭代器，获取所有匹配结果。
const str = 'hello world, hello javascript'
const regex = /hello/g
const matches = str.matchAll(regex)
for (const match of matches) {
console.log(match)
}输出结果为：
["hello", index: 0, input: "hello world, hello javascript", groups: undefined] ["hello", index: 13, input: "hello world, hello javascript", groups: undefined]
可以看到，每个匹配结果都是一个数组，包含匹配到的字符串、匹配位置和输入字符串等信息。
迭代器对象
matchAll 方法返回的迭代器对象有两个方法：next 和 Symbol.iterator。
next 方法返回一个包含匹配结果的对象，包括 value、done 两个属性。value 属性为匹配结果数组，done 属性表示是否已经遍历完所有匹配结果。
const str = 'hello world, hello javascript'
const regex = /hello/g
const matches = str.matchAll(regex)
console.log(matches.next()) // { value: ['hello', index: 0, input: 'hello world, hello javascript', groups: undefined], done: false }
console.log(matches.next()) // { value: ['hello', index: 13, input: 'hello world, hello javascript', groups: undefined], done: false }
console.log(matches.next()) // { value: undefined, done: true }Symbol.iterator 方法返回迭代器对象本身，可以用于实现自定义迭代器。
-- -------------------- ---- -------
----- --- - ------ ------ ----- -----------
----- ----- - --------
----- ------- - -------------------
----- ---------- - -
------------------ -------- -- -
------ ----
--
----- -------- -- -
----- ------ - --------------
-- ------------- -
------ - ----- ---- -
- ---- -
------ - ------ ------------ -
-
-
-
--- ------ ----- -- ----------- -
------------------
-带分组的正则表达式
matchAll 方法还支持带分组的正则表达式，每个匹配结果的数组中会包含分组捕获的内容。
const str = 'hello world, hello javascript'
const regex = /(hello) (\w+)/g
const matches = str.matchAll(regex)
for (const match of matches) {
console.log(match)
}输出结果为：
["hello world", "hello", "world", index: 0, input: "hello world, hello javascript", groups: undefined] ["hello javascript", "hello", "javascript", index: 13, input: "hello world, hello javascript", groups: undefined]
实际应用场景
matchAll 方法在实际应用中有很多场景，例如：
提取 URL 参数
我们可以使用正则表达式匹配 URL 中的参数，然后使用 matchAll 方法遍历所有匹配结果。
-- -------------------- ---- ------- ----- --- - ---------------------------------------------- ----- ----- - ----------------------- ----- ------- - ------------------- ----- ------ - -- --- ------ ----- -- -------- - ---------------- - -------- - ------------------- -- - --- ------ ----- ------- ---- ---- -
高亮匹配字符串
我们可以使用正则表达式匹配字符串中的关键词，并将其高亮显示。
-- -------------------- ---- ------- ----- --- - ------ ------ ----- ----------- ----- ------- - ------- ----- ----- - --- ---------------------- ---- ----- ------- - ------------------- --- ------ - -- --- --------- - - --- ------ ----- -- -------- - ------ -- -------------------- ------------ ------ -- ------ ------------------------------------- --------- - ----------- - --------------- - ------ -- -------------------- ------------------- -- ----- ------------------------------ ------ ----- ------------------------------ ----------
总结
String.prototype.matchAll 方法是 ES12 中新增的一个方法，它可以用于在字符串中查找所有匹配的正则表达式，返回一个迭代器，方便我们遍历所有匹配结果。本文介绍了 matchAll 的基本用法、迭代器对象、带分组的正则表达式以及实际应用场景。在实际开发中，我们可以使用 matchAll 方法提高代码的效率和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fa80a7d10417a22265e188