ES12 中如何使用 String.prototype.matchAll() 方法进行多匹配处理
在前端开发中，常常需要对一段文本进行多个字符串匹配操作，从而提取出所需要的信息。而 ES12 中新增的 String.prototype.matchAll() 方法能够很好地解决这一问题。本文将详细介绍使用该方法进行多匹配处理的方法以及一些使用上的注意事项。
- matchAll() 方法的作用
String.prototype.matchAll() 方法能够在一个字符串中执行多个正则表达式匹配，并返回匹配结果的迭代器。该方法返回的迭代器能够通过 for...of 循环遍历，以获取每一次匹配的详细信息。
- 使用 matchAll() 方法进行多匹配处理
在使用 matchAll() 方法进行多匹配处理时，我们需要首先获取一个正则表达式对象，然后将其传递给 String.prototype.matchAll() 方法。下面是一个示例代码：
const str = 'Hello, world! The quick brown fox jumps over the lazy dog.';
const regex = /\b\w{5}\b/g;
const matches = str.matchAll(regex);
for (const match of matches) {
console.log(match[0], match.index);
}在上述代码中，我们首先定义了一个字符串 str 和一个正则表达式对象 regex。正则表达式对象的内容是匹配任意长度为 5 的单词。接着，我们将正则表达式对象传递给 String.prototype.matchAll() 方法，得到一个匹配结果的迭代器 matches。最后，我们使用 for...of 循环遍历该迭代器，以输出每一次匹配的详细信息。
- 注意事项
尽管 matchAll() 方法十分方便，但我们在使用时还是需要注意一些细节。
首先，matchAll() 方法返回的迭代器是惰性的。这意味着在使用 for...of 循环遍历迭代器之前，需要先使用 [...matches] 或 Array.from(matches) 将其转换为数组。
其次，matchAll() 方法返回的每一个匹配信息都是一个数组，而不是字符串。每一个数组包含了所有匹配的详细信息，其中第一个元素是匹配到的字符串，后面的元素是分组捕获到的字符串。在上述示例代码中，我们只使用了 match[0] 和 match.index，而没有使用其它元素。如果需要获取分组捕获到的字符串，可以通过对数组进行解构或数组下标访问来实现。例如，对于正则表达式 /(\w+)@(\w+).(\w+)/，我们可以通过以下代码获取每一个匹配信息的用户名、域名和后缀名：
const regex = /(\w+)@(\w+)\.(\w+)/g;
const str = 'jsmith@example.com alice@example.org';
for (const match of str.matchAll(regex)) {
const [_, username, domain, tld] = match;
console.log(username, domain, tld);
}其中的 _ 是用来占位符的，因为我们只需要第二个、第三个和第四个元素。
- 总结
使用 String.prototype.matchAll() 方法，能够方便地进行多个字符串匹配操作，并获取每一次匹配的详细信息。但需要注意该方法返回的迭代器是惰性的，需要转换为数组后再进行遍历。此外，在访问匹配信息时，需要注意每一个数组中包含的元素，以获取所需信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f18fc1f6b2d6eab3b60d5c