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:
/".+"/g
Linguagem 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:
/".+?"/g
Linguagem 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.