在前端开发中，我们经常需要处理文本内容，比如从字符串中提取出需要的信息，或者对文本进行格式化等操作。在 ES11 中，新增了一个 String.prototype.matchAll 方法，可以方便地对文本进行匹配和解析，提高编程效率和代码可读性。
String.prototype.matchAll 方法的基本用法
String.prototype.matchAll 方法的作用是在字符串中查找所有匹配指定正则表达式的子串，并返回一个包含所有匹配结果的迭代器对象。其基本语法如下：
string.matchAll(regexp);
其中，string 表示要匹配的字符串，regexp 表示要匹配的正则表达式。该方法返回一个迭代器对象，可以通过 for...of 循环遍历所有匹配结果。每个匹配结果是一个数组，包含匹配的子串和所有捕获组的值。
下面是一个简单的示例，演示如何使用 String.prototype.matchAll 方法匹配字符串中的所有数字：
const str = "abc123def456ghi789";
const regexp = /\d+/g;
for (const match of str.matchAll(regexp)) {
console.log(match);
}输出结果如下：
["123", index: 3, input: "abc123def456ghi789", groups: undefined] ["456", index: 9, input: "abc123def456ghi789", groups: undefined] ["789", index: 15, input: "abc123def456ghi789", groups: undefined]
可以看到，该方法返回了一个迭代器对象，包含了字符串中所有匹配正则表达式的子串。通过 for...of 循环遍历迭代器对象，可以依次获取每个匹配结果的数组。
String.prototype.matchAll 方法的进阶用法
除了基本用法之外，String.prototype.matchAll 方法还支持一些进阶用法，可以更加灵活地对文本进行匹配和解析。
捕获组
在正则表达式中使用捕获组，可以将匹配的子串中的某些部分提取出来，方便后续的处理。在 String.prototype.matchAll 方法中，捕获组的值会被包含在返回的数组中，可以通过数组下标访问。
下面是一个示例，演示如何使用捕获组提取出字符串中所有的邮箱地址：
const str = "abc@example.com def@example.com ghi@example.com";
const regexp = /(\w+@\w+\.\w+)/g;
for (const match of str.matchAll(regexp)) {
console.log(match[1]);
}输出结果如下：
"abc@example.com" "def@example.com" "ghi@example.com"
可以看到，通过使用捕获组，我们可以方便地提取出字符串中所有的邮箱地址，并对其进行后续处理。
嵌套迭代器
在某些场景下，我们需要在匹配过程中对子串进行进一步的处理，比如分割字符串或者提取出子串中的某些信息。在 String.prototype.matchAll 方法中，支持嵌套迭代器的用法，可以在匹配过程中对子串进行进一步的迭代。
下面是一个示例，演示如何使用嵌套迭代器提取出 HTML 中所有的链接地址：
// www.javascriptcn.com code example
const html = `
<a href="https://www.example.com">Example</a>
<a href="https://www.google.com">Google</a>
<a href="https://www.bing.com">Bing</a>
`;
const regexp = /<a\s+href="([^"]+)">([^<]+)<\/a>/g;
for (const match of html.matchAll(regexp)) {
const [link, url, text] = match;
console.log(`[${text}](${url})`);
}输出结果如下：
[Example](https://www.example.com) [Google](https://www.google.com) [Bing](https://www.bing.com)
可以看到，通过使用嵌套迭代器，我们可以方便地提取出 HTML 中所有的链接地址，并将其格式化为 Markdown 链接。
String.prototype.matchAll 方法的指导意义
String.prototype.matchAll 方法是一个非常实用的文本解析工具，可以方便地对字符串进行匹配和解析。在前端开发中，我们经常需要处理文本内容，比如从用户输入中提取出关键信息，或者对后端返回的数据进行格式化等操作。使用 String.prototype.matchAll 方法可以提高编程效率和代码可读性，避免重复造轮子。
在使用 String.prototype.matchAll 方法时，需要注意正则表达式的性能问题。由于 String.prototype.matchAll 方法会对字符串进行全局匹配，如果正则表达式的匹配规则过于复杂，可能会导致性能问题。因此，在编写正则表达式时，需要尽可能地考虑性能问题，避免使用过于复杂的匹配规则。
示例代码
下面是一个完整的示例代码，演示如何使用 String.prototype.matchAll 方法从 Markdown 文本中提取出所有的标题和链接：
// www.javascriptcn.com code example
const markdown = `
# Hello, World!
This is a [link](https://www.example.com).
## Getting Started
To get started, you need to install [Node.js](https://nodejs.org/).
## Examples
Here are some examples:
* [Example 1](https://www.example.com/example1)
* [Example 2](https://www.example.com/example2)
* [Example 3](https://www.example.com/example3)
`;
const regexp = /^(#+)\s+([^#\n]+)|\*\s+\[([^\]]+)\]\(([^)]+)\)/gm;
for (const match of markdown.matchAll(regexp)) {
const [_, level, title, text, url] = match;
if (level) {
console.log(`Level ${level.length}: ${title}`);
} else {
console.log(`[${text}](${url})`);
}
}输出结果如下：
Level 1: Hello, World! [link](https://www.example.com) Level 2: Getting Started [Node.js](https://nodejs.org/) [Example 1](https://www.example.com/example1) [Example 2](https://www.example.com/example2) [Example 3](https://www.example.com/example3)
可以看到，通过使用 String.prototype.matchAll 方法，我们可以方便地从 Markdown 文本中提取出所有的标题和链接，并对其进行格式化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d569b7a941bf7134a17e84