ES10 中增强版的正则表达式方法 (RegExp.prototype.matchAll()) 的用法和实战经验

正则表达式在 web 开发中是非常重要的一部分，它可以用来匹配、替换、分割字符串等。而在 ES10 中，正则表达式又新增了一种非常有用的方法——matchAll()，它可以更方便地获取一个字符串中所有匹配的子串，接下来将详细介绍该方法的用法和实战经验。

什么是 matchAll()

matchAll() 方法返回一个迭代器，每次迭代可以获取到一个匹配结果的详细信息，包括匹配的子串、索引、捕获组等等。该方法可以取代传统的循环调用 RegExp.exec() 来获取所有匹配的操作，它更加灵活和高效。

matchAll() 方法的用法

matchAll() 方法的使用非常简单，只需要在正则表达式对象上直接调用该方法即可。该方法返回的迭代器可以用 for-of 循环进行迭代，并且每次迭代返回一个匹配结果对象。

const str = 'JavaScript is powerful and flexible.';
const regExp = /e/g;
const matches = str.matchAll(regExp);
for(let match of matches) {
  console.log(match);
}

上述代码将会输出以下内容：

{0: "e", index: 1, input: "JavaScript", groups: undefined}
{0: "e", index: 2, input: "JavaScript", groups: undefined}
{0: "e", index: 14, input: "powerful and flexible.", groups: undefined}
{0: "e", index: 16, input: "powerful and flexible.", groups: undefined}

每个 match 对象包含以下属性：

• 0：匹配的子串
• index：匹配的起始索引位置
• input：原始的字符串
• groups：如果使用含有命名捕获组的正则表达式，该属性则为一个对象，包含了命名捕获组的信息

实战经验

1. 匹配所有的 URL 链接

matchAll() 方法可以轻松地从一段 HTML 代码中提取所有的 URL 链接，并以数组的形式返回。代码如下：

const html = '<a href="https://www.google.com"></a><a href="https://www.baidu.com"></a>';
const hrefs = Array.from(html.matchAll(/href\s*\=\s*\"(.+?)\"/g)).map(match => match[1]);
console.log(hrefs);

输出结果如下：

["https://www.google.com", "https://www.baidu.com"]

2. 匹配所有的十六进制颜色值

matchAll() 方法可以帮助我们从 CSS 样式代码中提取出所有的十六进制颜色值，代码如下：

const css = 'body { background-color: #000000; color: #ffffff; }';
const colors = Array.from(css.matchAll(/#[0-9a-fA-F]{6}/g)).map(match => match[0]);
console.log(colors);

输出结果如下：

["#000000", "#ffffff"]

3. 匹配所有的 IP 地址

matchAll() 方法可以帮助我们从字符串中提取出所有的 IPv4 地址，代码如下：

const str = 'This is an example IP address: 192.168.0.1, and another one: 127.0.0.1.';
const ips = Array.from(str.matchAll(/(\d{1,3}\.){3}\d{1,3}/g)).map(match => match[0]);
console.log(ips);

输出结果如下：

["192.168.0.1", "127.0.0.1"]

总结

matchAll() 方法是一个非常实用的正则表达式方法，它可以更加方便和高效地获取一个字符串中所有匹配的子串。在实际开发中，我们可以用它来提取 URL 链接、颜色值、IP 地址等等。希望本文的介绍可以帮助大家更好地使用 matchAll() 方法。

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