在 ES10 中，新增了 String.prototype.matchAll() 方法，用于在字符串中查找所有匹配正则表达式的子串，返回一个迭代器。本文将详细介绍该方法的使用方法及其在前端开发中的实际应用场景。
方法介绍
String.prototype.matchAll() 方法接受一个正则表达式作为参数，返回一个迭代器，该迭代器包含了所有匹配该正则表达式的子串。每个子串都是一个数组，包含匹配到的子串及其对应的捕获组。
const str = 'hello world';
const regex = /(\w+)\s(\w+)/g;
const matches = str.matchAll(regex);
for (const match of matches) {
console.log(match);
}输出结果为：
["hello world", "hello", "world", index: 0, input: "hello world", groups: undefined]
其中，第一个元素为匹配到的子串，后面的元素为捕获组。
实际应用场景
在实际开发中，String.prototype.matchAll() 方法可以用于处理文本中的所有匹配项，比如：
1. 提取所有链接
const text = 'Visit my blog at https://example.com and also check out https://google.com';
const regex = /https?:\/\/[^\s]+/g;
const matches = text.matchAll(regex);
for (const match of matches) {
console.log(match[0]);
}输出结果为：
https://example.com https://google.com
2. 处理 Markdown 中的所有标题
-- -------------------- ---- ------- ----- -------- - - - ----- ----- ---- -- - ---------- -- -------- ------- ---------- --- ------------ --- ------- ---------- -- ----- ----- - -------------- ----- ------- - ------------------------- --- ------ ----- -- -------- - ---------------------- -
输出结果为：
Hello World Subtitle Sub-subtitle
3. 处理 CSV 文件中的所有行
-- -------------------- ---- ------- ----- --- - ---------------- ------------ -------------- -- ----- ----- - ------------------------------- ----- ------- - -------------------- --- ------ ----- -- -------- - --------------------- --------- ---------- -
输出结果为：
name age gender John 30 Male Jane 25 Female
注意事项
需要注意的是，String.prototype.matchAll() 方法在迭代器中返回的每个匹配项都是一个数组，而不是一个字符串。因此，如果需要将所有匹配项合并成一个字符串，需要使用 Array.prototype.join() 方法。
const str = 'hello world';
const regex = /(\w+)\s(\w+)/g;
const matches = str.matchAll(regex);
const result = Array.from(matches, match => match.slice(1).join(' '));
console.log(result); // ["hello world"]总结
String.prototype.matchAll() 方法是 ES10 中新增的一个有用的字符串处理方法，可以用于处理文本中的所有匹配项。在实际开发中，我们可以借助该方法来提取链接、处理 Markdown 标题、解析 CSV 文件等。需要注意的是，该方法返回的是一个迭代器，需要使用 Array.from() 方法将其转换成数组后再进行操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dafc0b1886fbafa4814831