ECMAScript 2018 中新增的 String.prototype.matchAll() 方法的用法详解

在 ECMAScript 2018 中，新增了一个非常实用的方法 String.prototype.matchAll()，它可以更方便地对字符串进行匹配和分组，并且返回 Iterator 对象以支持更多种类的操作。本文将详细介绍这个新特性的用法、使用场景以及示例代码。

什么是 String.prototype.matchAll() 方法？

String.prototype.matchAll() 方法是 ECMAScript 2018 中新增的 String 原型链上的方法，它用于全局匹配一个字符串，并返回一个包含所有匹配结果的迭代器。该方法支持使用正则表达式来进行匹配，并且支持使用分组来获取匹配结果的更多细节信息。

String.prototype.matchAll() 方法的语法

str.matchAll(regexp)

参数：

• regexp：正则表达式对象或者字符串。如果是字符串，则会被自动转换为正则表达式。

返回值：

• 包含匹配结果的迭代器对象。

如何使用 String.prototype.matchAll() 方法？

假设有一个需求：对一个长字符串进行遍历，并查找其中的所有匹配项和它们各自的子匹配。传统的方法可能会是使用 RegExp.exec() 方法，例如：

const str = 'hello-world123!today-is2022-04-05';
const pattern = /(\w+)-(\w+)(\d+)/g;

let matches = null;
while ((matches = pattern.exec(str)) !== null) {
    console.log(matches);
}

输出结果如下：

["hello-world123", "hello", "world", "123", index: 0, input: "hello-world123!today-is2022-04-05", groups: undefined]
["is2022-04-05", "is", "2022", "04", "05", index: 17, input: "hello-world123!today-is2022-04-05", groups: undefined]

但是这样的方式有一个缺陷，就是需要手动写循环控制来遍历每一个匹配项和其中的子匹配，而且对于嵌套的分组结构，这种方式很难维护和操作。

那么 String.prototype.matchAll() 方法就可以很好地解决这个问题，如下所示：

const str = 'hello-world123!today-is2022-04-05';
const pattern = /(\w+)-(\w+)(\d+)/g;

let matches = str.matchAll(pattern);
for (const match of matches) {
    console.log(match);
}

输出结果如下：

["hello-world123", "hello", "world", "123", index: 0, input: "hello-world123!today-is2022-04-05", groups: undefined]
["is2022-04-05", "is", "2022", "04", "05", index: 17, input: "hello-world123!today-is2022-04-05", groups: undefined]

可以看到，使用 String.prototype.matchAll() 方法可以直接返回一个包含所有匹配结果的迭代器，并且可以更轻松地对这些结果进行遍历和操作。

String.prototype.matchAll() 方法的使用场景

String.prototype.matchAll() 方法适用于各种需要对字符串进行全局匹配和分组操作的场景，例如：

• 遍历 HTML 文本中的所有标签，并获取标签名称和属性。
• 遍历 JSON 文本中的所有对象元素，并获取它们的属性和值。
• 从大量的日志文本中查找特定的错误信息，并对其进行统计和分析。

这些场景都需要对字符串进行全局匹配操作，并且需要对匹配结果进行细致的分组处理，例如获取所有子匹配、匹配位置等。在这些场景中，String.prototype.matchAll() 方法可以大大简化代码，提高效率和可维护性。

String.prototype.matchAll() 方法的示例代码

下面是一个更复杂的示例代码，演示了如何使用 String.prototype.matchAll() 方法进行 HTML 文本匹配和分组操作：

// www.javascriptcn.com code example
const html = `
    <html>
        <head>
            <title>My Title</title>
        </head>
        <body>
            <h1>Heading 1</h1>
            <p class="intro">Introduction text</p>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
        </body>
    </html>
`;

const pattern = /<([a-z]+)([^>]*)>(.*?)<\/\1>/gs;
const matches = html.matchAll(pattern);

for (const match of matches) {
    const [tag, attrs, content] = match;
    console.log(`Tag: ${tag}`);
    console.log(`Attributes: ${attrs}`);
    console.log(`Content: ${content}`);
}

输出结果如下：

// www.javascriptcn.com code example
Tag: <head>
Attributes: 
Content: 
            <title>My Title</title>
        
Tag: <title>
Attributes: 
Content: My Title
Tag: </title>
Attributes: 
Content: 

Tag: </head>
Attributes: 
Content: 

Tag: <body>
Attributes: 
Content: 
            <h1>Heading 1</h1>
            <p class="intro">Introduction text</p>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
        
Tag: <h1>
Attributes: 
Content: Heading 1
Tag: </h1>
Attributes: 
Content: 

Tag: <p>
Attributes: class="intro"
Content: Introduction text
Tag: </p>
Attributes: class="intro"
Content: 

Tag: <ul>
Attributes: 
Content: 
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            
Tag: <li>
Attributes: 
Content: Item 1
Tag: </li>
Attributes: 
Content: 

Tag: <li>
Attributes: 
Content: Item 2
Tag: </li>
Attributes: 
Content: 

Tag: <li>
Attributes: 
Content: Item 3
Tag: </li>
Attributes: 
Content: 

Tag: </ul>
Attributes: 
Content: 

Tag: </body>
Attributes: 
Content: 

Tag: </html>
Attributes: 
Content: 

可以看出，使用 String.prototype.matchAll() 方法可以很方便地对 HTML 文本进行遍历和分组，获取标签、属性和文本内容等信息。这样的处理代码可读性更高，并且可以应对不同类型的 HTML 结构和字符串形式。

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