Expressão Regular: Ganancioso

Resumo: neste tutorial, você aprenderá sobre quantificadores gananciosos e como eles funcionam nos bastidores com JavaScript.

Todos os quantificadores funcionam em modo ganancioso por padrão. Isso significa que os quantificadores corresponderão tanto quanto possível aos elementos anteriores.

O exemplo a seguir ilustra como funcionam os quantificadores gananciosos.

O exemplo dos quantificadores gananciosos

Suponha que você tenha uma string HTML que representa um elemento de botão:

const button = '<button type="submit" class="btn">Send</button>'Linguagem de código:  JavaScript  ( javascript )

E você deseja combinar os textos entre aspas duplas ("") como submit e btn.

Para fazer isso, você usa aspas duplas (“), classe de caracteres ponto (.) e o quantificador (+) para construir o seguinte padrão:

/".+"/gLinguagem de código:  JavaScript  ( javascript )

Este padrão significa que:

• " começa com "
• . corresponde a qualquer caractere, exceto nova linha
• + corresponde ao caractere anterior uma ou mais vezes
• " termina com "
• g flag retorna todas as correspondências

O seguinte usa o método match() para combinar a string s com o padrão:

const s = '<button type="submit" class="btn">Send</button>'
const pattern = /".+"/g;

const result = s.match(pattern)
console.log(result);
Linguagem de código:  JavaScript  ( javascript )

Saída:

['"submit" class="btn"']Linguagem de código:  JavaScript  ( javascript )

Ele retorna '"submit" class="btn"' em vez de submit” e btn.

A razão é que no modo ganancioso, o quantificador (+) tenta corresponder ao elemento anterior (".) tanto quanto possível.

Como funcionam os quantificadores gananciosos em JavaScript

Primeiro, o mecanismo regex começa a corresponder a partir do primeiro caractere da string s.

Em seguida, como o primeiro caractere < não corresponde à aspa ("), o mecanismo regex continua a corresponder aos próximos caracteres até encontrar a primeira aspa ("):

Em seguida, o mecanismo regex combina a string com a próxima regra .+ na expressão regular.

Como a regra .+ corresponde a um ou mais caracteres, o mecanismo regex corresponde aos caracteres até encontrar o final da string:

Depois disso, o mecanismo regex verifica a última regra da expressão regular, que é uma aspa (“). Porém, não há mais nenhum caractere para corresponder porque já atingiu o final da string. Isso significa que o mecanismo regex é muito ganancioso ao ir longe demais.

Finalmente, o mecanismo regex volta do final da string para encontrar a aspa (“). Esta etapa é muitas vezes referida como retrocesso .

Como resultado, a correspondência é a seguinte substring, que não é o que você esperava:

"submit" class="btn"Linguagem de código:  JavaScript  ( javascript )

Para resolver esse problema, você precisa instruir o quantificador (+) para usar o modo não ganancioso (ou preguiçoso) em vez do modo ganancioso. Para fazer isso, você adiciona um ponto de interrogação (?) após o quantificador assim:

/".+?"/gLinguagem de código:  JavaScript  ( javascript )

O script a seguir retorna o resultado esperado:

const s = '<button type="submit" class="btn">Send</button>'
const pattern = /".+?"/g;

const result = s.match(pattern)
console.log(result);
Linguagem de código:  JavaScript  ( javascript )

Saída:

['"submit"', '"btn"']Linguagem de código:  JavaScript  ( javascript )

Resumo

• Os quantificadores usam o modo ganancioso por padrão.
• Os quantificadores gananciosos correspondem tanto quanto possível aos seus elementos anteriores.