正则表达式是前端开发中非常重要的一部分。在 ES12 中，新的 RegExp 功能被引入：Named Capture Groups（命名捕获组）。这个新功能使得正则表达式更加强大和灵活，同时也更加易于阅读和维护。
什么是 Named Capture Groups？
在以前的正则表达式中，我们可以使用捕获组（Capture Groups）来匹配和提取字符串中的特定部分。例如，我们可以使用括号来将一个表达式包围起来，这样我们就可以在后面的代码中引用这个表达式。例如：
const regex = /(\d{4})-(\d{2})-(\d{2})/; const match = regex.exec('2022-01-01'); console.log(match[1]); // '2022' console.log(match[2]); // '01' console.log(match[3]); // '01'
这段代码使用了三个捕获组来匹配一个日期字符串，并将其分成年、月和日三个部分。然而，这样做有一个缺点：随着表达式变得复杂，捕获组的编号也会变得越来越难以理解和维护。
Named Capture Groups 就是为了解决这个问题而引入的。它允许我们给捕获组起一个名字，这样我们就可以在后面的代码中使用名字来引用这个组，而不是使用数字编号。例如：
const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/; const match = regex.exec('2022-01-01'); console.log(match.groups.year); // '2022' console.log(match.groups.month); // '01' console.log(match.groups.day); // '01'
这段代码使用了 Named Capture Groups 来匹配同样的日期字符串。我们可以看到，每个捕获组都有一个名字，这些名字可以作为 match.groups 对象的属性来使用。
如何使用 Named Capture Groups？
使用 Named Capture Groups 的语法非常简单。我们只需要在括号中使用 ?<name> 的形式来给捕获组起一个名字，就可以了。例如：
const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
这个表达式会匹配一个日期字符串，其中年、月和日都是用四位数字表示的。捕获组的名字分别是 year、month 和 day。
我们可以使用 exec() 方法来执行这个表达式，并得到一个包含捕获组信息的对象。例如：
const match = regex.exec('2022-01-01'); console.log(match.groups.year); // '2022' console.log(match.groups.month); // '01' console.log(match.groups.day); // '01'
这段代码会输出 2022、01 和 01，分别对应于年、月和日。
我们还可以在正则表达式中使用这些捕获组。例如，我们可以使用 \k<name> 的形式来引用一个捕获组。例如：
const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/; const newDate = '2022-01-02'.replace(regex, '$<day>/$<month>/$<year>'); console.log(newDate); // '02/01/2022'
这段代码会将一个日期字符串从 yyyy-mm-dd 的格式转换成 dd/mm/yyyy 的格式。我们使用了 $<name> 的形式来引用捕获组，并将其按照新的格式进行了替换。
Named Capture Groups 的指导意义
Named Capture Groups 的引入使得正则表达式更加易于阅读和维护。我们不再需要记住捕获组的数字编号，而是可以使用有意义的名字来引用它们。这样，当表达式变得复杂时，我们也可以更加轻松地理解它们。
此外，Named Capture Groups 还可以帮助我们更加灵活地使用捕获组。例如，我们可以在同一个表达式中多次使用同一个名字的捕获组，而不用担心编号的冲突。这样，我们就可以更加自由地组合和重用捕获组，从而提高代码的可读性和可维护性。
示例代码
下面是一个使用 Named Capture Groups 的示例代码，它会匹配一个 HTML 标签，并提取出其中的标签名和属性列表：
-- -------------------- ---- ------- ----- ----- - -------------------------------------------------------------------------- ----- ---- - --- ------------------------------ ----------------------------- --- ------ ----- ------ - ----------------- - ------------------------------ -- --- -- -------------------- - ----- ----- - --------------------------------------- --- ------ ---- -- ------ - ----- ------ ------ - ---------------- ------------------------------------- ------- - - -展开代码
这段代码会输出：
a href=https://www.example.com target=_blank
这个示例展示了如何使用 Named Capture Groups 来匹配和提取 HTML 标签中的标签名和属性列表。我们可以看到，使用 Named Capture Groups 可以让代码更加易于阅读和理解，同时也更加灵活和可维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cae38be46428fe9e37b585
