ES8 中引入的正则表达式的命名捕获组及其应用

在 ES8 中，正则表达式新增了命名捕获组的语法，这个功能让正则表达式的匹配更加方便灵活，下面我们来说说它的具体应用。

什么是命名捕获组

传统的捕获组是通过在正则表达式中使用小括号 () 来捕获结果，例如：

const str = 'Hello, World!';
const pattern = /(\w+), (\w+)!/;
const matches = pattern.exec(str);
console.log(matches[1]); // 输出 Hello
console.log(matches[2]); // 输出 World

命名捕获组是给捕获的结果起个名字来，可以通过 ?<name> 的语法实现，例如：

const str = 'Hello, World!';
const pattern = /(?<greeting>\w+), (?<target>\w+)!/;
const matches = pattern.exec(str);
console.log(matches.groups.greeting); // 输出 Hello
console.log(matches.groups.target); // 输出 World

可以看到，通过命名捕获组，我们可以直接访问捕获的结果，语法更加优雅。

命名捕获组的应用

一、替换字符串中的内容

在之前的例子中，我们已经知道了如何使用命名捕获组来获取捕获的结果，那么我们能不能将命名捕获组获取到的结果进行替换呢？当然可以，使用 $<name> 的语法即可，例如：

const str = 'Hello, World!';
const pattern = /(?<greeting>\w+), (?<target>\w+)!/;
const result = str.replace(
  pattern,
  '$<greeting>, JavaScript!'
);
console.log(result); // 输出 Hello, JavaScript!

通过 $<name> 的语法，我们可以方便地替换字符串中特定的内容。

二、检查字符串是否符合格式要求

命名捕获组在检查字符串是否符合特定格式要求中很有用，例如，我们要检查一个字符串是否为正确的日期格式，我们可以这样写正则表达式：

const pattern = /^(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})$/;

这个正则表达式可以检查字符串是否符合年-月-日的格式，同时将年、月、日分别命名为 year、month、day。

三、匹配 HTML 标签

在前端开发中，我们常常需要从 HTML 文本中提取标签和标签中的内容，命名捕获组也可以应用在这个场景中，例如：

const html = '<div class="item"><h3>标题</h3><p>内容</p></div>';
const pattern = /<div.*?><h3>(?<title>.*?)<\/h3><p>(?<content>.*?)<\/p><\/div>/;
const matches = pattern.exec(html);
console.log(matches.groups.title); // 输出 标题
console.log(matches.groups.content); // 输出 内容

通过将 HTML 标签中的内容命名为 title 和 content，我们可以方便地提取出其中需要的信息。

总结

命名捕获组是 ES8 中新增的正则表达式语法，它可以让我们更加方便地获取捕获的结果，以及在替换、检查和提取字符串中特定内容等场景中得到方便使用，除此之外，我们也可以通过结合其它语法，如后行断言，来实现更加灵活多样的正则匹配，希望本文能够对大家了解正则表达式的命名捕获组有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6499317148841e9894627bf9