使用 ES10 新增的 String.prototype.matchAll 方法匹配多个字符串

在 ES10 中，新增了一个非常方便的方法 String.prototype.matchAll，可以帮助我们在字符串中匹配多个字符串，这对于前端开发来说是非常有用的。在本文中，我们将介绍如何使用 String.prototype.matchAll 方法，并提供一些示例代码来帮助您更好地理解这个方法。

String.prototype.matchAll 方法概述

String.prototype.matchAll 方法返回一个迭代器，该迭代器包含匹配字符串的所有结果。该方法接受一个正则表达式作为参数，并在字符串中查找所有匹配该正则表达式的子字符串。

该方法的语法如下：

string.matchAll(regexp)

其中，string 是要查找匹配子字符串的源字符串，regexp 是要匹配的正则表达式。该方法返回一个迭代器，该迭代器包含所有匹配结果的详细信息。

String.prototype.matchAll 方法的返回值

String.prototype.matchAll 方法的返回值是一个迭代器，该迭代器包含所有匹配结果的详细信息。每个匹配结果都是一个数组，该数组包含以下信息：

• 匹配的子字符串
• 匹配的位置
• 匹配的捕获组

下面是一个示例代码，展示了如何使用 String.prototype.matchAll 方法查找所有匹配的子字符串：

const str = 'Hello world! Hello JavaScript!';
const regexp = /Hello/g;
const matches = str.matchAll(regexp);

for (const match of matches) {
  console.log(match);
}

上面的代码将输出以下内容：

["Hello", index: 0, input: "Hello world! Hello JavaScript!", groups: undefined]
["Hello", index: 13, input: "Hello world! Hello JavaScript!", groups: undefined]

示例代码

下面是一些示例代码，演示了如何使用 String.prototype.matchAll 方法来查找匹配的子字符串：

示例代码 1

查找字符串中所有的数字：

const str = '123abc456def789ghi';
const regexp = /\d+/g;
const matches = str.matchAll(regexp);

for (const match of matches) {
  console.log(match);
}

上面的代码将输出以下内容：

["123", index: 0, input: "123abc456def789ghi", groups: undefined]
["456", index: 6, input: "123abc456def789ghi", groups: undefined]
["789", index: 12, input: "123abc456def789ghi", groups: undefined]

示例代码 2

查找字符串中所有的 URL：

const str = 'Visit my website at https://www.example.com or https://www.example.net';
const regexp = /https?:\/\/[\w.]+\S*/g;
const matches = str.matchAll(regexp);

for (const match of matches) {
  console.log(match);
}

上面的代码将输出以下内容：

["https://www.example.com", index: 17, input: "Visit my website at https://www.example.com or https://www.example.net", groups: undefined]
["https://www.example.net", index: 47, input: "Visit my website at https://www.example.com or https://www.example.net", groups: undefined]

示例代码 3

查找字符串中所有的 HTML 标签：

const str = '<div class="container"><h1>Title</h1><p>Content</p></div>';
const regexp = /<\w+\s*[^>]*>/g;
const matches = str.matchAll(regexp);

for (const match of matches) {
  console.log(match);
}

上面的代码将输出以下内容：

["<div class=\"container\">", index: 0, input: "<div class=\"container\"><h1>Title</h1><p>Content</p></div>", groups: undefined]
["<h1>", index: 21, input: "<div class=\"container\"><h1>Title</h1><p>Content</p></div>", groups: undefined]
["<p>", index: 30, input: "<div class=\"container\"><h1>Title</h1><p>Content</p></div>", groups: undefined]

总结

String.prototype.matchAll 方法是一个非常方便的方法，可以帮助我们在字符串中查找多个匹配的子字符串。通过使用该方法，我们可以轻松地从字符串中提取所需的信息，并对其进行操作。希望本文能够帮助您更好地理解该方法，并在实际开发中得到应用。

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