Resumo : neste tutorial, você aprenderá sobre grupos de captura de regex JavaScript e como usá-los para criar subgrupos para uma correspondência.
Introdução aos grupos de captura de regex JavaScript
Suponha que você tenha o seguinte caminho:
resource/idLinguagem de código: JavaScript ( javascript )Por exemplo:
posts/10No caminho, o recurso é postse idé 10. Para corresponder ao caminho, você usa a seguinte expressão regular :
/\w+\/\d+/Linguagem de código: JavaScript ( javascript )Neste padrão:
\w+é um conjunto de caracteres de palavra com um quantificador (+) que corresponde a um ou mais caracteres de palavra./corresponde à barra (/). A barra invertida (\) escapa da barra,\d+é a combinação do conjunto de caracteres de dígitos e um quantfifer (+), que corresponde a um ou mais dígitos.
O seguinte usa o /\w+\/\d+/padrão de expressão regular para corresponder à string ‘ posts/10':
const path = 'posts/10';
const pattern = /\w+\/\d+/;
const match = path.match(pattern);
console.log(match);
Linguagem de código: JavaScript ( javascript )Saída:
[ 'posts/10', index: 0, input: 'posts/10', groups: undefined ]Linguagem de código: JavaScript ( javascript )Para obter o id 10 do path posts/10, você usa um grupo de captura. Para criar um grupo de captura para uma regra, coloque essa regra entre parênteses assim:
(rule)Linguagem de código: JavaScript ( javascript )O exemplo a seguir cria um grupo de captura que captura o idvalor do path posts/10:
'\w+/(\d+)'Linguagem de código: JavaScript ( javascript )Neste padrão, colocamos a regra \d+entre parênteses (). Se você executar o programa com o novo padrão, verá que ele exibe uma correspondência:
const path = 'posts/10';
const pattern = /\w+\/(\d+)/;
const match = path.match(pattern);
console.log(match);Linguagem de código: JavaScript ( javascript )Saída:
[ 'posts/10', '10', index: 0, input: 'posts/10', groups: undefined ]Linguagem de código: JavaScript ( javascript )O método match() retorna uma matriz de correspondências. O primeiro elemento é a correspondência inteira ( 'posts/10') enquanto o segundo ( '10') é o valor do grupo de captura.
Observe que o String.match()método não retornará grupos se você definir o gsinalizador, por exemplo, /\w+\/(\d+)/g. Se você usar o gsinalizador, precisará usar o String.matchAll()método para obter os grupos.
Vários grupos de captura
Para capturar o recurso ( posts) e o id ( 10) do caminho ( post/10), use vários grupos de captura na expressão regular da seguinte forma:
/(\w+)\/(\d+)/Linguagem de código: JavaScript ( javascript )A regex possui dois grupos de captura, um para \w+e outro para \d+.
O script a seguir mostra toda a partida e todos os subgrupos:
const path = 'posts/10';
const pattern = /(\w+)\/(\d+)/;
const match = path.match(pattern);
console.log(match);
Linguagem de código: JavaScript ( javascript )Saída:
['posts/10', 'posts', '10', index: 0, input: 'posts/10', groups: undefined]Linguagem de código: JavaScript ( javascript )Para acessar o primeiro e o segundo subgrupos, você usa match[1]e match[2]. Observe que match[0]retorna a partida inteira. Por exemplo:
const path = 'posts/10';
const pattern = /(\w+)\/(\d+)/;
const match = path.match(pattern);
console.log(match[0], match[1], match[2]);Linguagem de código: JavaScript ( javascript )Saída:
posts/10 posts 10Linguagem de código: JavaScript ( javascript )Grupos de captura nomeados
Para acessar um subgrupo em uma partida, você usa um índice. Entretanto, você pode desejar acessar um subgrupo por um nome significativo para torná-lo mais conveniente.
Para fazer isso, você usa o grupo de captura nomeado para atribuir um nome a um grupo. Veja a seguir a sintaxe para atribuir um nome a um grupo de captura:
(?<name>rule)Linguagem de código: JavaScript ( javascript )Nesta sintaxe:
()indica um grupo de captura.?<name>especifica o nome do grupo de captura.ruleé uma regra no padrão.
Por exemplo, o seguinte cria os nomes:
/?<resource>\w+)\/(?<id>\d+/Linguagem de código: JavaScript ( javascript )Nesta sintaxe:
- O
resourceé o nome do primeiro grupo de captura - Este
idé o nome do segundo grupo de captura.
Por exemplo:
const path = 'posts/10';
const pattern = /(?<resource>\w+)\/(?<id>\d+)/;
const match = path.match(pattern);
console.log(match);
Linguagem de código: JavaScript ( javascript )Saída:
[
'posts/10',
'posts',
'10',
index: 0,
input: 'posts/10',
groups: [Object: null prototype] { resource: 'posts', id: '10' }
]Linguagem de código: JavaScript ( javascript )A correspondência possui uma groupspropriedade que é um objeto. O match.groupsobjeto possui propriedades cujos nomes são o nome do grupo de captura e os valores são os valores de captura. Por exemplo:
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]);
}Linguagem de código: JavaScript ( javascript )Saída:
resource posts
id 10Linguagem de código: JavaScript ( javascript )Mais exemplo de grupo de captura nomeado
A seguinte expressão regular corresponde ao caminhoposts/2022/02/18
/\w+\/d{4}\/d{2}\/d{2}/Linguagem de código: JavaScript ( javascript )Para capturar o recurso (post), ano (2022), mês (02) e dia (18), você usa os grupos de captura nomeados assim:
/(?<resource>\w+)\/(?<year>\d{4})\/(?<month>\d{2})\/(?<day>\d{2})/Linguagem de código: JavaScript ( javascript )Este programa usa os padrões para corresponder ao caminho e mostra todos os subgrupos:
const path = 'posts/2022/02/18';
const pattern =
/(?<resource>\w+)\/(?<year>\d{4})\/(?<month>\d{2})\/(?<day>\d{2})/;
const match = path.match(pattern);
console.log(match.groups);
Linguagem de código: JavaScript ( javascript )Saída:
{resource: 'posts', year: '2022', month: '02', day: '18'}Linguagem de código: JavaScript ( javascript )Resumo
- Coloque uma regra entre parênteses
()para criar um grupo de captura. Uma expressão regular pode ter vários grupos de captura. - Use
(?<capturingGroupName>rule)para criar um grupo de captura nomeado para a regra em um padrão.
