在 ES7 中，引入了一项新功能——RegExp 具名捕获组。这个功能可以让我们在正则表达式中指定一个名称，用于捕获匹配的内容，而不是使用默认的数字索引。这篇文章将详细介绍这个新功能，并提供一些实例代码供读者参考。
什么是 RegExp 具名捕获组？
在传统的正则表达式中，我们使用括号来捕获匹配的内容，然后使用数字索引来引用这些捕获的内容。例如，下面的正则表达式将匹配一个由两个数字组成的字符串，并将这两个数字分别捕获到两个括号中：
const regex = /(\d+)\.(\d+)/;
const match = regex.exec('3.14');
console.log(match[1]); // '3'
console.log(match[2]); // '14'在这个例子中，我们使用了括号来捕获两个数字，然后使用数字索引 1 和 2 来引用这两个数字。这种方式通常很难记忆和维护，特别是当我们在正则表达式中使用了很多括号时。
而 RegExp 具名捕获组可以让我们给每个括号指定一个名称，这样我们就可以使用名称来引用捕获的内容，而不是使用数字索引。例如，下面的正则表达式使用了具名捕获组，将两个数字分别命名为 integer 和 fraction：
const regex = /(?<integer>\d+)\.(?<fraction>\d+)/;
const match = regex.exec('3.14');
console.log(match.groups.integer); // '3'
console.log(match.groups.fraction); // '14'在这个例子中，我们使用了 (?<name>pattern) 的语法来定义一个具名捕获组，其中 name 是捕获组的名称，pattern 是匹配的模式。然后，我们可以使用 match.groups.name 的语法来引用捕获的内容。
如何使用 RegExp 具名捕获组？
在使用 RegExp 具名捕获组时，我们需要遵循以下几个步骤：
- 在正则表达式中使用
(?<name>pattern)的语法来定义一个具名捕获组，其中name是捕获组的名称，pattern是匹配的模式。 - 在执行正则表达式时，使用
exec()方法或match()方法来获取匹配结果。 - 如果匹配成功，可以使用
match.groups.name的语法来引用捕获的内容。
下面是一个使用 RegExp 具名捕获组的例子，它将匹配一个由多个单词组成的字符串，并将每个单词分别捕获到一个具名捕获组中：
const regex = /(?<first>\w+)\s+(?<last>\w+)/;
const match = regex.exec('John Doe');
console.log(match.groups.first); // 'John'
console.log(match.groups.last); // 'Doe'在这个例子中，我们使用了 \w+ 的语法来匹配一个或多个单词字符，然后使用 \s+ 的语法来匹配一个或多个空格字符。最后，我们将每个单词分别命名为 first 和 last，并使用 match.groups.name 的语法来引用捕获的内容。
RegExp 具名捕获组的实例分析
下面是一些使用 RegExp 具名捕获组的实例，这些实例可以帮助读者更好地理解这个新功能的使用方法。
1. 匹配 URL 中的协议、主机名和路径
下面的正则表达式将匹配一个 URL，并将其中的协议、主机名和路径分别捕获到三个具名捕获组中：
const regex = /(?<protocol>\w+):\/\/(?<hostname>[\w.]+)\/(?<path>.*)/;
const match = regex.exec('https://www.example.com/path/to/file.html');
console.log(match.groups.protocol); // 'https'
console.log(match.groups.hostname); // 'www.example.com'
console.log(match.groups.path); // 'path/to/file.html'在这个例子中，我们使用了 \w+ 的语法来匹配一个或多个单词字符，用于匹配协议名称。然后，我们使用 \/\/ 的语法来匹配两个斜杠，用于分隔协议和主机名。接下来，我们使用 [\w.]+ 的语法来匹配一个或多个单词字符或点号，用于匹配主机名。最后，我们使用 .* 的语法来匹配零个或多个任意字符，用于匹配路径名称。
2. 匹配 HTML 标签中的属性名和属性值
下面的正则表达式将匹配一个 HTML 标签，并将其中的属性名和属性值分别捕获到两个具名捕获组中：
const regex = /<(\w+)\s+(?<attrs>.+?)>/;
const match = regex.exec('<div class="foo" id="bar">');
console.log(match[1]); // 'div'
console.log(match.groups.attrs); // 'class="foo" id="bar"'在这个例子中，我们使用了 <\w+ 的语法来匹配一个 HTML 标签名称，然后使用 \s+ 的语法来匹配一个或多个空格字符。接下来，我们使用 (?<attrs>.+?) 的语法来定义一个具名捕获组，用于捕获标签中的所有属性。注意，我们使用了 .+? 的语法，这意味着我们使用非贪婪模式匹配任意字符，以避免捕获过多的内容。
3. 匹配 JSON 字符串中的键值对
下面的正则表达式将匹配一个 JSON 字符串，并将其中的键和值分别捕获到两个具名捕获组中：
const regex = /"(?<key>\w+)":\s*"(?<value>[^"]+)"/;
const match = regex.exec('{"foo": "bar", "baz": "qux"}');
console.log(match.groups.key); // 'foo'
console.log(match.groups.value); // 'bar'在这个例子中，我们使用了 "(?<key>\w+)" 的语法来匹配一个键名称，并将其命名为 key。然后，我们使用 :\s* 的语法来匹配一个冒号和零个或多个空格字符。接下来，我们使用 "(?<value>[^"]+)" 的语法来匹配一个值，并将其命名为 value。注意，我们使用了 [^"]+ 的语法，这意味着我们使用贪婪模式匹配除双引号之外的任意字符，以避免捕获过多的内容。
总结
在本文中，我们介绍了 ES7 中新增的 RegExp 具名捕获组的功能，并提供了一些实例代码供读者参考。RegExp 具名捕获组可以让我们使用名称来引用捕获的内容，而不是使用数字索引，这样可以让我们更轻松地记忆和维护正则表达式。如果你在编写 JavaScript 应用程序时需要使用正则表达式，那么这个新功能一定会对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6506566895b1f8cacd245292