在 ES10 中，正则表达式 named group 是一个非常有用的功能。它允许我们将匹配到的字符串分组，并且可以通过名称来访问这些分组。这个功能可以帮助我们更好地理解和处理字符串数据。在本文中，我们将详细介绍 ES10 中 regexp named group 的使用方法和示例。
什么是 regexp named group？
正则表达式 named group 是一种分组语法，它允许我们将匹配到的字符串分组，并且可以通过名称来访问这些分组。它的语法如下：
(?<name>pattern)
其中，name 是分组的名称，pattern 是匹配的正则表达式。
如何使用 regexp named group？
使用 regexp named group 非常简单。我们只需要在正则表达式中使用上面的语法，并且在匹配后使用名称来访问分组即可。
例如，我们想要匹配一个日期字符串，并且将年、月、日分别保存到三个变量中。我们可以使用下面的正则表达式：
const dateRegex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;这个正则表达式将日期字符串分为三个部分：年、月、日。每个部分都有一个名称，并且使用了 regexp named group 的语法。
接下来，我们可以使用 exec 方法来匹配日期字符串并且访问每个分组。例如：
const dateStr = '2022-07-28'; const match = dateRegex.exec(dateStr); const year = match.groups.year; // "2022" const month = match.groups.month; // "07" const day = match.groups.day; // "28"
使用 exec 方法匹配字符串后，我们可以通过 match.groups 属性来访问每个分组。每个分组的名称就是我们在正则表达式中定义的名称。
regexp named group 的示例
下面是一些使用 regexp named group 的示例。
匹配 URL
我们可以使用 regexp named group 来匹配 URL，并且将协议、主机、路径、查询字符串分别保存到不同的变量中。
-- -------------------- ---- ------- ----- -------- - ----------------------------------------------------------------------------------------------------------------- ----- ------ - ------------------------------------------------- ----- ----- - ---------------------- ----- -------- - ---------------------- -- ------- ----- ---- - ------------------ -- ---------------- ----- ---- - ------------------ -- --------- ----- ---- - ------------------ -- --------- ----- ----- - ------------------- -- -------------- ----- ---- - ------------------ -- -----
匹配 HTML 标签
我们可以使用 regexp named group 来匹配 HTML 标签，并且将标签名、属性列表分别保存到不同的变量中。
const htmlRegex = /<(?<tag>\w+)(?<attrs>(?:\s+\w+(?:="(?:\\"|[^"])*"|'(?:\\'|[^'])*')?)*)\s*\/?>/; const htmlStr = '<div class="container" id="main">Hello, World!</div>'; const match = htmlRegex.exec(htmlStr); const tag = match.groups.tag; // "div" const attrs = match.groups.attrs; // " class="container" id="main""
匹配邮件地址
我们可以使用 regexp named group 来匹配邮件地址，并且将用户名、域名分别保存到不同的变量中。
const emailRegex = /^(?<username>[a-zA-Z0-9._%+-]+)@(?<domain>[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/;
const emailStr = 'john.doe@example.com';
const match = emailRegex.exec(emailStr);
const username = match.groups.username; // "john.doe"
const domain = match.groups.domain; // "example.com"总结
regexp named group 是 ES10 中一个非常有用的功能。它允许我们将匹配到的字符串分组，并且可以通过名称来访问这些分组。通过本文的介绍，相信大家已经掌握了 regexp named group 的使用方法和示例。在实际开发中，我们可以根据需要使用 regexp named group 来更好地处理和理解字符串数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e1a9161886fbafa4e9cca2