正则表达式是前端开发中常用的工具。ES9 中的正则表达式增加了命名捕获组的功能，这个功能使得在判断某些拥有多个匹配捕获组的正则表达式时更加简洁方便。
命名捕获组
在 ES9 之前，捕获组都是用数字来表示的。在一个正则表达式中，如果需要捕获多个信息，就需要通过将正则表达式分组来实现。每个分组都有一个对应的数字，通常是从左到右逐个分配。例如：
const regex = /(\w+) (\w+)/;
const match = regex.exec("Hello World");
console.log(match[1]); // Hello
console.log(match[2]); // World在 ES9 中，我们可以为捕获组命名，这样就可以更好地理解每个组的作用。
命名捕获组的语法
命名捕获组的语法使用 (?<name>group)，其中 name 是组的名称，group 是被分组的正则表达式。
例如：
const regex = /(?<first>\w+) (?<last>\w+)/;
const match = regex.exec("Hello World");
console.log(match.groups.first); // Hello
console.log(match.groups.last); // World下面我们来详细解释一下这段代码。
- 定义正则表达式
/（?<first>\w+）（?<last>\w+）/，其中\w+是一个匹配任何单词字符的子表达式。 - 调用
regex.exec("Hello World")进行匹配，并将结果存储在match中。 - 获取捕获组
first中的匹配结果，即match.groups.first，等价于 ES9 之前的match[1]。 - 获取捕获组
last中的匹配结果，即match.groups.last，等价于 ES9 之前的match[2]。
命名捕获组的优势
使用命名捕获组有以下优势：
更加直观
命名捕获组可以给正则表达式的组名起一个有意义的名称，这样代码可读性更高。
例如，对于一个匹配邮件地址的正则表达式：
const regex = /^((?<username>\w+\.?\w+)|(?<quoted>\".*\"))@(?<domain>\w+\.\w+)$/;
我们可以直接看出这个正则表达式是用来匹配邮件地址的，而分组的名称也告诉我们每个分组的作用。
更加方便
使用命名捕获组，我们可以直接从 match.groups 对象中获取匹配结果，而不需要知道分组的数字编号。
例如，假设我们有以下正则表达式：
const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;我们可以通过以下代码将日期字符串解构为对象：
const match = regex.exec("2022-05-26");
const { year, month, day } = match.groups;
console.log(year, month, day); // 2022 05 26这种方式比以前的解构方式更加简单和直观。
命名捕获组的使用示例
下面我们来看一个使用命名捕获组的示例。假设我们需要从一段 HTML 代码中提取出所有的链接标签，以及每个标签中的 href 属性和文本内容。
我们可以使用以下正则表达式来匹配链接标签：
const regex = /<a href="(?<href>.*?)">(.*?)<\/a>/gs;
接下来，我们使用 regex 对 HTML 代码进行匹配，然后从 match 对象中提取出所有的链接标签：
-- -------------------- ---- ------- ----- ---- - - -- ---------------------------------- -- ----------------------------------- -- --- ------ ----- ------ - ----------------- - ------------------------------ ---------- -
输出
http://www.baidu.com 百度 http://www.google.com 谷歌
通过使用命名捕获组，我们可以更好地抽取出需要的信息，代码也更加简洁，易于阅读和维护。
总结
ES9 中的命名捕获组使得正则表达式更加直观、简洁。在需要匹配多个捕获组的情况下，命名捕获组可以提高代码可读性、可维护性，使代码更加简单易懂、易于维护。在日常开发中，我们可以借助命名捕获组的特性来写出更加高效、简洁、易维护的正则表达式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f6f407f6b2d6eab3f832d3