在 ES12 中，RegExp 函数新增了一个非常有用的方法，即 matchAll() 方法。该方法用于匹配一个字符串中所有符合指定正则表达式的子串，并返回一个迭代器。这个新特性可以让我们更加方便地处理字符串中的数据。
什么是 matchAll() 方法
matchAll() 方法用于匹配一个字符串中所有符合指定正则表达式的子串，并返回一个迭代器。它的语法如下：
string.matchAll(regexp);
其中，string 是需要匹配的字符串，regexp 是要匹配的正则表达式。
matchAll() 方法会返回一个迭代器对象，每个迭代器的值都是一个数组，包含匹配到的字符、位置、分组信息等。
使用 matchAll() 方法
下面我们来看一下如何在代码中使用 matchAll() 方法。假设我们有一个包含多个邮箱地址的字符串，我们想要匹配并提取其中的邮箱用户名和域名。我们可以使用下面的代码来实现：
-- -------------------- ---- ------- ----- ----- - --------------------- ------------------- --------------------- ----- ----- - ----------------------------------------------- ----- ------- - ---------------------- --- ------ ----- -- -------- - ------------------ ------------ ------- ------------ ------ ----------------- -
以上代码将输出：
Name: myemail, Domain: example.com, Index: 0 Name: yourmail, Domain: gmail.com, Index: 18 Name: hismail, Domain: hotmail.com, Index: 36
我们可以看到，matchAll() 方法非常方便地匹配了我们需要的数据，并返回一个包含所有匹配项的迭代器。
深入理解 matchAll() 方法
除了上面的基本用法外，matchAll() 方法还有一些其他的特性，可以让我们更加方便地处理字符串中的数据。
返回的迭代器
matchAll() 方法返回的是一个迭代器，因此我们可以使用 for...of 循环来遍历所有匹配项。以下代码演示了如何使用 for...of 循环来遍历匹配项：
const email = "myemail@example.com, yourmail@gmail.com, hismail@hotmail.com";
const regex = /([A-Za-z0-9]+)@([A-Za-z0-9]+\.[A-Za-z]{2,})/g;
for (const match of email.matchAll(regex)) {
console.log(`Name: ${match[1]}, Domain: ${match[2]}, Index: ${match.index}`);
}index 属性
在 matchAll() 方法返回的迭代器中，每个匹配项都包含一个 index 属性，表示匹配项在原始字符串中的位置。你可以使用 index 属性来确定匹配项的位置。
以下代码演示了如何使用 index 属性来查找匹配项的位置：
const email = "myemail@example.com, yourmail@gmail.com, hismail@hotmail.com";
const regex = /([A-Za-z0-9]+)@([A-Za-z0-9]+\.[A-Za-z]{2,})/g;
for (const match of email.matchAll(regex)) {
console.log(`Name: ${match[1]}, Domain: ${match[2]}, Index: ${match.index}`);
}全局匹配
与其他正则表达式方法一样，matchAll() 方法默认也会进行全局匹配。因此，如果你希望在字符串中匹配所有满足条件的子串，可以使用 matchAll() 方法。
以下代码演示了如何使用 matchAll() 方法进行全局匹配：
const html = "<p>Hello world</p><p>This is a paragraph</p>";
const regex = /<p>(.*?)<\/p>/g;
for (const match of html.matchAll(regex)) {
console.log(match[1]);
}使用分组
我们也可以在正则表达式中使用分组，然后在返回的匹配项数组中使用索引来访问这些分组数据。例如，我们可以使用下面的正则表达式来匹配并提取邮箱用户名和域名：
const regex = /([A-Za-z0-9]+)@([A-Za-z0-9]+\.[A-Za-z]{2,})/g;其中，第一个分组 ([A-Za-z0-9]+) 匹配用户名，第二个分组 ([A-Za-z0-9]+\.[A-Za-z]{2,}) 匹配域名。
以下代码演示了如何在 matchAll() 方法返回的匹配项数组中访问分组信息：
const email = "myemail@example.com";
const regex = /([A-Za-z0-9]+)@([A-Za-z0-9]+\.[A-Za-z]{2,})/g;
const match = email.matchAll(regex);
console.log(`Name: ${match[1]}, Domain: ${match[2]}`);总结
matchAll() 方法是 ES12 中一个非常有用的新增特性。它可以用于匹配一个字符串中所有符合指定正则表达式的子串，并返回一个迭代器。我们可以使用 for...of 循环来遍历所有匹配项，也可以使用 index 属性来确定匹配项在原始字符串中的位置。此外，我们还可以使用分组来更加详细地处理匹配项数据。
在实际开发中， matchAll() 方法可以帮助我们更加方便地处理字符串中的数据，并且降低了开发的复杂度。我们应该充分利用这个特性，提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64df5111f6b2d6eab3a85829