ES11 更强大的正则表达式：matchAll 方法-JavaScript中文网-JavaScript教程资源分享门户

在 ES11 中，正则表达式得到了强化，其中最值得注意的是 matchAll 方法。matchAll 方法可以让我们更加方便地匹配文本，并高效地提取出需要的信息。本文将详细介绍 matchAll 方法的使用，包括其特性、示例以及使用技巧。

matchAll 方法特性

在 ES11 中，RegExp 对象的 matchAll 方法返回一个迭代器，该迭代器包含给定字符串所有匹配正则表达式的子字符串，以及配合每个匹配的捕获组的迭代器。以下是使用 matchAll 方法进行匹配的示例：

const re = /hi/g;
const str = 'hi world, hi humans, hi there';

for (const match of str.matchAll(re)) {
  console.log(match);
}

以上代码将输出：

["hi", index: 0, input: "hi world, hi humans, hi there", groups: undefined]
["hi", index: 10, input: "hi world, hi humans, hi there", groups: undefined]
["hi", index: 21, input: "hi world, hi humans, hi there", groups: undefined]

可以看到，在以上示例中，使用 matchAll 方法进行了正则表达式匹配，for 循环迭代了匹配到的结果，并将每个匹配的子字符串，以及捕获组迭代器输出。

除了返回包含匹配结果以及捕获组迭代器的迭代器外，matchAll 方法还有以下特性：

返回索引

matchAll 方法的迭代器还包含一个名为 index 的属性，该属性返回当前匹配子串在当前字符串中的索引。

空捕获组

如果正则表达式中有未匹配的捕获组，matchAll 方法将返回该捕获组的迭代器，该迭代器的所有项目都为 undefined。

matchAll 方法示例

下面通过一些示例来演示 matchAll 方法的有关技巧。

简单匹配

const re = /\w+/g;
const str = 'hello world, welcome to the JavaScript world';

for (const match of str.matchAll(re)) {
  console.log(match);
}

以上示例可以匹配字符串中的所有单词。输出如下：

["hello", index: 0, input: "hello world, welcome to the JavaScript world", groups: undefined]
["world", index: 6, input: "hello world, welcome to the JavaScript world", groups: undefined]
["welcome", index: 12, input: "hello world, welcome to the JavaScript world", groups: undefined]
["to", index: 20, input: "hello world, welcome to the JavaScript world", groups: undefined]
["the", index: 23, input: "hello world, welcome to the JavaScript world", groups: undefined]
["JavaScript", index: 27, input: "hello world, welcome to the JavaScript world", groups: undefined]
["world", index: 38, input: "hello world, welcome to the JavaScript world", groups: undefined]

提取 URL 参数

const re = /(?<=\?|&)([^=]+)=([^&]+)/g;
const str = '?name=bob&age=18&sex=male';

for (const match of str.matchAll(re)) {
  console.log(match);
}

以上示例可以提取出 URL 参数中的键值对。输出如下：

["name=bob", "name", "bob", index: 1, input: "?name=bob&age=18&sex=male", groups: undefined]
["age=18", "age", "18", index: 10, input: "?name=bob&age=18&sex=male", groups: undefined]
["sex=male", "sex", "male", index: 15, input: "?name=bob&age=18&sex=male", groups: undefined]

使用捕获组迭代器

const re = /(\d+)-(\d+)/g;
const str = '1-10,20-30,100-200';

for (const match of str.matchAll(re)) {
  const [fullMatch, from, to] = match;
  console.log(`${fullMatch} => from ${from} to ${to}`);
}

以上示例将匹配到的字符串进行分割并输出。输出如下：

1-10 => from 1 to 10
20-30 => from 20 to 30
100-200 => from 100 to 200

matchAll 方法使用技巧

下面是一些在使用 matchAll 方法时可能会用到的技巧：

对于 regex 执行结果是否为空可以使用类数组方法存在性判断或者使用解构方式获取到其中的数值进行判断等处理；

const value = str.matchAll(/[0-9.]+(\s*[元条])+/g)?.[0]?.[0];
if (value.endsWith('元')) {
  console.log(`￥ ${value.slice(0, -1)}`);
}

if(typeof match.groups?.repeat !== 'undefined'){
  console.log(value.repeat(match.groups?.repeat));
}

需要跨行匹配的，为了方便使用换行符的 . 尽可能贪婪地拉取数据，否则会出现无法匹配到数据的场景。

-- -------------------- ---- -------
----- --- - ------------ ---------

-- -------
-- ----- -- - -----

-- - - - - --------
----- -- - -------

------------------------------展开代码

需要通过正则的多个捕获组进行数据处理，可以通过解构等方式将捕获的值进行处理，可以避免函数中存在多个待处理的变量的情况。

const re = /(?<name>bob) is (?<age>18) (years old).*/;

for (const {groups: {name, age, text}} of str.matchAll(re)) {
  console.log(`${name} is ${age} ${text}`);
}

以上是 matchAll 方法的使用技巧，在使用时需要根据具体情况进行灵活使用，以便有效地提升应用程序的性能。

总结

matchAll 方法是 ES11 引入的新特性，可以让我们更加方便地匹配文本，并高效地提取出需要的信息。本文介绍了 matchAll 方法的种种特性，以及如何在实际应用中使用 matchAll 方法。通过实际示例的演示，相信读者已经能够掌握 matchAll 方法的使用要点，从而在实际应用中充分利用这一新特性，提高程序性能，提升开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64dd6ec5f6b2d6eab389e205

ES11 更强大的正则表达式：matchAll 方法