正则表达式在前端开发中有着广泛的应用，它可以用来检查和操作字符串。在 ECMAScript 2016 中，引入了一个新的特性：命名捕获组（Named Capturing Groups），它能够更方便地处理正则表达式匹配时所捕获的字符串。
什么是 Named Capturing Groups
在传统的正则表达式中，我们使用“捕获组”来提取匹配的内容。例如，以下正则表达式可以匹配一个电话号码，并将区号、电话号码和分机号三个部分分别捕获到了三个捕获组中：
/(\d{3})-(\d{3}-\d{4})(?: ext\.(\d+))?/在 ECMAScript 2016 中，我们可以使用命名捕获组来给捕获的内容命名，而不是简单地使用数字索引来获取捕获组的内容。以下正则表达式实现了与上面相同的功能，但使用了命名捕获组：
/(?<areaCode>\d{3})-(?<phoneNumber>\d{3}-\d{4})(?: ext\.(?<extension>\d+))?/源自正则表达式语法的 (?…) 语法可以用来定义命名捕获组：(?<name>…) 。捕获组的名字必须是合法的标识符，因此不能包含空格、标点符号和其他无效字符。
与传统的捕获组相比，命名捕获组更为直观和易于维护。它们使代码更易于阅读和理解，尤其是对于在正则表达式上工作的团队成员而言。
如何访问 Named Capturing Groups
在 ECMAScript 2016 中，我们可以使用两种方法来访问命名捕获组的值：使用索引或使用属性。
如果要使用索引来访问命名捕获组的值，那么可以在捕获匹配时使用数字索引。例如：
const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = regex.exec('2021-10-01');
console.log(match[1]); // "2021"
console.log(match[2]); // "10"
console.log(match[3]); // "01"如果要使用属性来访问命名捕获组的值，那么可以像访问对象属性一样，使用捕获组的名字作为属性访问。例如：
const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = regex.exec('2021-10-01');
console.log(match.groups.year); // "2021"
console.log(match.groups.month); // "10"
console.log(match.groups.day); // "01"使用属性来访问捕获组的值要比使用索引更为直观、灵活且不易出错。
使用 Named Capturing Groups 的例子
验证密码强度
以下正则表达式可以验证密码强度，要求密码长度至少为8个字符，其中必须包含至少一个大写字母、一个小写字母和一个数字：
/^(?=.*[A-Z])(?=.*[a-z])(?=.*\d).{8,}$/使用命名捕获组可以更方便地检查每个条件是否都已满足。以下是上述正则表达式的命名捕获组版本：
/^(?=.*(?<upper>[A-Z]))(?=.*(?<lower>[a-z]))(?=.*(?<digit>\d)).{8,}$/我们可以使用以下 JavaScript 代码来检查密码是否符合要求：
const regex = /^(?=.*(?<upper>[A-Z]))(?=.*(?<lower>[a-z]))(?=.*(?<digit>\d)).{8,}$/;
const password = 'Password123';
const match = regex.test(password);
console.log(match); // true
console.log(match.groups); // {upper: "P", lower: "assword", digit: "123"}替换字符串
Named Capturing Groups 也可以在字符串替换中使用。以下代码演示了如何使用 Named Capturing Groups 将 First Name 和 Last Name 两个部分调换：
const regex = /(?<first>\w+)\s(?<last>\w+)/; const name = 'John Smith'; const result = name.replace(regex, '$<last>, $<first>'); console.log(result); // "Smith, John"
总结
使用命名捕获组可以更方便、直观地处理正则表达式匹配时所捕获的字符串。我们可以使用索引或属性来访问命名捕获组的值，访问属性更为直观、灵活且不易出错。在实际开发过程中，应该尽可能地使用命名捕获组来提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd331795b1f8cacdcc5a6d