使用 ES11 中新的 String.prototype.matchAll() 方法

ES11 是 ECMAScript 标准的最新版本，其中新增了很多有趣的特性和函数。其中一个很酷的函数是 String.prototype.matchAll()，它允许我们在一个字符串中完成全局匹配，并且针对每个匹配项都返回一个迭代器。这个新方法对于处理文本数据来说非常有用，本文将会介绍它的详细使用方法，并提供一些实用的示例。

String.prototype.matchAll() 简介

String.prototype.matchAll() 方法返回一个迭代器，它包含了字符串中所有被匹配的子串及其捕获组（如果有的话）。这个迭代器可以用来依次处理这些匹配项。String.prototype.matchAll() 的API与 String.prototype.match() 很相似，但匹配结果的格式是不同的。

如何使用 matchAll()

matchAll() 接受一个正则表达式作为参数，并返回一个迭代器。迭代器返回的元素是一个数组，第一个元素表示正则表达式匹配到的原始字符串，后面的元素对应正则表达式中定义的那些捕获组。

const text = "JavaScript is a great programming language. I love JavaScript!";

console.log([...text.matchAll(/JavaScript/g)]); // 由两个数组组成的迭代器

以上代码将会输出一个迭代器，包含了所有在 text 中与正则表达式匹配的结果。可以使用展开运算符（spread operator）将迭代器转化为数组。如下所示：

[["JavaScript", index: 0, input: "JavaScript is a great programming language. I love JavaScript!"], ["JavaScript", index: 30, input: "JavaScript is a great programming language. I love JavaScript!"]]

可以看到，每个元素都是一个数组，第一个元素是匹配到的字符串。接下来的元素是每个捕获组的内容（如果有的话）。在这个示例中，正则表达式只包含一个捕获组，即 (/JavaScript/g)，用来匹配字符串 "JavaScript"。

matchAll() 的示例

找到所有的 URL

我们可以使用 matchAll() 快速从一个字符串中找到所有的 URL 。下面的代码将打印出一个迭代器，在控制台中可以看到包含多个数组的迭代器。

const text = "Find me at https://www.example.com and also at https://www.mywebsite.com";
const regexp = /https?:\/\/[^\s]+/g; // 匹配所有的 URL
[...text.matchAll(regexp)].forEach(item => {
  console.log(`Found URL: ${item[0]}`);
});

输出：

Found URL: https://www.example.com
Found URL: https://www.mywebsite.com

处理 CSV 文件

我们也可以使用 matchAll() 方法来处理 CSV 文件。假设我们有一个包含数据的 CSV 文件，文件如下所示：

Name,Age,Email
Jane,30,jane@example.com
John,40,john@example.com

下面的代码片段描述了如何对这个 CSV 文件进行处理：

const csv = `Name,Age,Email
Jane,30,jane@example.com
John,40,john@example.com`;

const rows = [...csv.matchAll(/^.*(?:\r\n|\n|\r)/gm)].map(row => row[0].split(","));
console.log(rows);

输出结果是一个由数组组成的数组，每个数组表示 CSV 文件中的一行数据：

[
  ["Name", "Age", "Email"],
  ["Jane", "30", "jane@example.com"],
  ["John", "40", "john@example.com"],
]

本例中我们使用 /^.*(?:\r\n|\n|\r)/gm 这个正则表达式，它能够依次匹配每一行数据，在 map() 方法中使用 split() 方法将每一行数据进行分割。

总结

String.prototype.matchAll() 方法是一个很好用的工具，它可以轻松地从一个字符串中找到所有匹配的字符串、子串以及其捕获组。无论是为了处理文本文件还是编写 web 应用，matchAll() 都是非常实用的函数，它能够让我们更快地完成一些任务。

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