正则表达式在前端领域起着至关重要的作用，它可以帮助我们轻松地解决很多字符串匹配的需求。而在 ES12 中，引入了正则表达式命名捕获组的概念，这一特性能够让我们更方便地在复杂的字符串匹配中获得所需信息。本文将深入介绍 ES12 中的正则表达式命名捕获组相关的内容，并提供示例代码供读者学习和实践。
什么是命名捕获组？
在传统的正则表达式中，通常使用括号将需要匹配的部分包含起来，如下所示：
const regex = /(\d{3})-(\d{3})-(\d{4})/;
const match = regex.exec('123-456-7890');
const areaCode = match[1]; // 123
const exchangeCode = match[2]; // 456
const lineNumber = match[3]; // 7890在上述代码中，我们使用了括号将需要匹配的区域分成了三个部分，然后通过 exec() 方法获取到了匹配结果，并通过 match 数组的索引倒推出了各个部分的内容。然而这种方式可能存在一些问题，比如：
- 索引顺序容易混淆，存在易错风险。
- 如果正则表达式中存在多个括号，会增加索引判断的复杂度。
而命名捕获组则是一种解决方案，它允许我们给括号内的内容命名，并直接通过名字获取到结果。示例如下：
const regex = /(?<areaCode>\d{3})-(?<exchangeCode>\d{3})-(?<lineNumber>\d{4})/;
const match = regex.exec('123-456-7890');
const areaCode = match.groups.areaCode; // 123
const exchangeCode = match.groups.exchangeCode; // 456
const lineNumber = match.groups.lineNumber; // 7890在上述代码中，我们使用了 (?<groupName>pattern) 形式的语法来给需要匹配的部分命名，并且通过 groups 属性直接获取到了各个部分的内容。
正则表达式命名捕获组的语法
在 ES12 中，命名捕获组的语法使用了 (?<groupName>pattern) 的形式来进行定义，其中 groupName 是命名的部分名称，pattern 是需要匹配的正则表达式。
示例如下：
const regex = /(?<groupName>pattern)/;
在使用命名捕获组进行匹配的时候，可以使用 match.groups.groupName 的语法来直接获取到命名组的内容。
命名捕获组的使用场景
在前端开发中，命名捕获组的应用场景一般涉及到需要从字符串中提取出相关的信息。
场景一：提取 URL 中的参数
我们常常会遇到需要从 URL 中提取参数的情况。如下面的 URL 包含三个参数：id、name、category。
const url = 'https://www.example.com/details?id=123&name=test&category=foo';
使用传统的正则表达式方式需要写出如下代码：
// javascriptcn.com 代码示例
const regex = /(?:\?|&)(\w+)=(\w+)/g;
const match = {};
let m;
while (m = regex.exec(url)) {
match[m[1]] = m[2];
}
console.log(match); // { id: '123', name: 'test', category: 'foo' }该方式存在容易出错的缺点。而使用命名捕获组方式则更为简洁明了，如下代码所示：
// javascriptcn.com 代码示例
const regex = /(?:\?|&)(?<name>\w+)=(?<value>\w+)/g;
const match = {};
let m;
while (m = regex.exec(url)) {
match[m.groups.name] = m.groups.value;
}
console.log(match); // { id: '123', name: 'test', category: 'foo' }场景二：解析日志中的关键信息
在后端日志系统中，经常需要从文本中提取出关键信息，如 IP 地址、访问时间等等。传统的做法是使用正则表达式进行匹配，然后逐一获取想要的信息。而命名捕获组可以帮助我们简化代码，更容易理解和维护。
以下代码展示了如何从日志文本中提取出访问 IP 和时间信息：
const log = '[2022-06-29T17:25:19+08:00] 220.181.38.148 visited /index.html';
const regex = /^\[(?<time>.+)\] (?<ip>\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}) visited (?<path>\/\S+)/;
const match = regex.exec(log);
console.log(match.groups.ip); // 220.181.38.148
console.log(match.groups.time); // 2022-06-29T17:25:19+08:00总结
ES12 中的正则表达式命名捕获组为字符串匹配提供了更加灵活和高效的方案，它能够帮助我们解决传统正则表达式中存在的一些缺陷。通过本文的介绍，希望读者能够深入了解命名捕获组的概念和语法，并在实际开发中灵活运用，提高代码的可读性和可维护性。
示例代码
// javascriptcn.com 代码示例
//提取URL中的参数
const url = 'https://www.example.com/details?id=123&name=test&category=foo';
const regex = /(?:\?|&)(?<name>\w+)=(?<value>\w+)/g;
const match = {};
let m;
while (m = regex.exec(url)) {
match[m.groups.name] = m.groups.value;
}
console.log(match); // { id: '123', name: 'test', category: 'foo' }
//解析日志中的关键信息
const log = '[2022-06-29T17:25:19+08:00] 220.181.38.148 visited /index.html';
const regex = /^\[(?<time>.+)\] (?<ip>\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}) visited (?<path>\/\S+)/;
const match = regex.exec(log);
console.log(match.groups.ip); // 220.181.38.148
console.log(match.groups.time); // 2022-06-29T17:25:19+08:00来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6545f0807d4982a6ebfa5e03