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/id
Linguagem de código: JavaScript ( javascript )
Por exemplo:
posts/10
No caminho, o recurso é posts
e 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 id
valor 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 g
sinalizador, por exemplo, /\w+\/(\d+)/g
. Se você usar o g
sinalizador, 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 10
Linguagem 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 groups
propriedade que é um objeto. O match.groups
objeto 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 10
Linguagem 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.