JavaScript 正则表达式：捕获组

摘要：在本教程中，您将了解 JavaScript 正则表达式捕获组以及如何使用它们为匹配创建子组。

JavaScript 正则表达式捕获组简介

假设您有以下路径

resource/idCode language: JavaScript (javascript)

例如

posts/10

在路径中，资源是 posts，id 是 10。要匹配路径，您使用以下正则表达式

/\w+\/\d+/Code language: JavaScript (javascript)

在此模式中

\w+ 是一个词字符集，带有一个量词 (+)，匹配一个或多个词字符。
/ 匹配正斜杠 (/)。反斜杠 (\) 转义正斜杠，
\d+ 是数字字符集和量词 (+) 的组合，匹配一个或多个数字。

以下使用正则表达式 /\w+\/\d+/ 模式来匹配字符串 'posts/10'

const path = 'posts/10';
const pattern = /\w+\/\d+/;

const match = path.match(pattern);
console.log(match);
Code language: JavaScript (javascript)

输出

[ 'posts/10', index: 0, input: 'posts/10', groups: undefined ]Code language: JavaScript (javascript)

要从路径 posts/10 中获取 id 10，您使用捕获组。要为规则创建捕获组，您将该规则放在括号中，如下所示

(rule)Code language: JavaScript (javascript)

以下示例创建了一个捕获组，该组从路径 posts/10 中捕获 id 值

'\w+/(\d+)'Code language: JavaScript (javascript)

在此模式中，我们将规则 \d+ 放在括号 () 内。如果您使用新模式运行程序，您将看到它显示了一个匹配项

const path = 'posts/10';
const pattern = /\w+\/(\d+)/;

const match = path.match(pattern);
console.log(match);Code language: JavaScript (javascript)

输出

[ 'posts/10', '10', index: 0, input: 'posts/10', groups: undefined ]Code language: JavaScript (javascript)

match() 方法返回一个匹配数组。第一个元素是整个匹配项 ('posts/10')，而第二个元素 ('10') 是捕获组的值。

请注意，如果您设置 g 标志，例如 /\w+\/(\d+)/g，则 String.match() 方法将不会返回组。如果您使用 g 标志，则需要使用 String.matchAll() 方法来获取组。

多个捕获组

要捕获路径 (post/10) 的资源 (posts) 和 id (10)，您在正则表达式中使用多个捕获组，如下所示

/(\w+)\/(\d+)/Code language: JavaScript (javascript)

正则表达式有两个捕获组，一个用于 \w+，另一个用于 \d+。

以下脚本显示了整个匹配项和所有子组

const path = 'posts/10';
const pattern = /(\w+)\/(\d+)/;

const match = path.match(pattern);
console.log(match);
Code language: JavaScript (javascript)

输出

['posts/10', 'posts', '10', index: 0, input: 'posts/10', groups: undefined]Code language: JavaScript (javascript)

要访问第一个和第二个子组，您使用 match[1] 和 match[2]。请注意，match[0] 返回整个匹配项。例如

const path = 'posts/10';
const pattern = /(\w+)\/(\d+)/;

const match = path.match(pattern);
console.log(match[0], match[1], match[2]);Code language: JavaScript (javascript)

输出

posts/10 posts 10Code language: JavaScript (javascript)

命名捕获组

要访问匹配中的子组，您使用索引。但是，您可能希望通过有意义的名称访问子组，以使其更方便。

为此，您使用**命名捕获组**为组分配名称。以下显示了为捕获组分配名称的语法

(?<name>rule)Code language: JavaScript (javascript)

在此语法中

() 表示一个捕获组。
?<name> 指定捕获组的名称。
rule 是模式中的规则。

例如，以下创建了名称

/?<resource>\w+)\/(?<id>\d+/Code language: JavaScript (javascript)

在此语法中

resource 是第一个捕获组的名称
id 是第二个捕获组的名称。

例如

const path = 'posts/10';
const pattern = /(?<resource>\w+)\/(?<id>\d+)/;

const match = path.match(pattern);
console.log(match);
Code language: JavaScript (javascript)

输出

[
  'posts/10',
  'posts',
  '10',
  index: 0,
  input: 'posts/10',
  groups: [Object: null prototype] { resource: 'posts', id: '10' }
]Code language: JavaScript (javascript)

匹配项具有一个 groups 属性，它是一个对象。match.groups 对象具有属性，其名称是捕获组名称，值是捕获值。例如

const path = 'posts/10';
const pattern = /(?<resource>\w+)\/(?<id>\d+)/;

const match = path.match(pattern);
for (const name in match.groups) {
  console.log(name, match.groups[name]);
}Code language: JavaScript (javascript)

输出

resource posts
id 10Code language: JavaScript (javascript)

总结

将规则放在括号 () 内以创建捕获组。一个正则表达式可以有多个捕获组。
使用 (?<capturingGroupName>rule) 为模式中的规则创建命名捕获组。

本教程对您有帮助吗？