1

Criei um projeto em Angular e estou usando a seguinte expressão regular:

export const INTERFACE_REGEX = new RegExp(/(?<=.*\/)(.*?)(?=@|-.+)/gi);

Acontece que ao usar o Goggle Chrome o projeto funciona normal, mas se eu tentar abrir pelo Firefox dá erro:

Erro: syntax invalid regex group

Eu fiz vários testes e descobri que se eu tirar o ?<= da expressão deixa assim eu consigo compilar usando o firefox.

Qual seria o equivalente desse trecho da expressão (?<=.*\/)?

0

2 Respostas 2

5

Nota: quando a pergunta foi feita, o Firefox não tinha suporte a lookbehind (por isso o erro), mas atualmente suporta e o erro não ocorre mais.


Primeiramente, um detalhe: não precisa construir a regex desta forma. Ao usar as barras (que é a notação literal para expressões regulares), você já está criando um RegExp, então passá-lo para o construtor é redundante. Ou seja, as 4 formas abaixo são equivalentes:

regex = /expressão/gi;
regex = new RegExp('expressão', 'gi');
regex = new RegExp(/expressão/gi);
regex = new RegExp(/expressão/, 'gi');

Mas eu só usaria as 2 primeiras (a primeira se a expressão for "fixa", e a segunda se você tiver uma string que represente a expressão - desde que se tome os devidos cuidados). As 2 últimas são redundantes (a última talvez seja útil em casos nos quais as flags são dinâmicas, mas vale lembrar que ela só é válida a partir do ECMAScript 6).

Dito isso, vamos ao problema em si:


O erro ocorre porque o trecho (?<=.*\/) é um lookbehind, e na data em que esta resposta foi escrita, o Firefox não tinha suporte (mas atualmente tem, portanto não precisaria usar mais a solução abaixo, a menos que você precise dar suporte a algum dos browsers que ainda não suportam - por isso, de qualquer forma, fica documentada aqui a alternativa).

Enfim, existe uma forma de simular isso em qualquer outro ambiente que não suporte lookbehind. A ideia do lookbehind é verificar se algo existe antes do match atual. Sendo assim, basta quebrar a regex em duas (a parte que vem antes e o restante). Se eu encontrar um match, eu vejo se o que vem antes dele corresponde ao lookbehind. Mais ou menos assim:

let r_match = /(.?)(?=@|-.+)/gi;
let lookbehind = /.*\/$/; // simula o lookbehind
let match;
let results = [];
while (match = r_match.exec('./a@ ./x-fd')) { // testando com uma string qualquer
  if (match.index == r_match.lastIndex) r_match.lastIndex++;
  // obtém a substring de zero até o índice em que o match ocorre
  let leftContext = match.input.substring(0, match.index);
  if (lookbehind.test(leftContext)) { // simular lookbehind
    results.push(match[1]);
  }
}
console.log(results); // [ 'a', 'x' ]

Então a ideia é primeiro verificar se tem um match. Depois eu pego a substring, do início da string até o ponto em que o match foi encontrado, e vejo se ele termina com o trecho correspondente ao lookbehind. Para isso adicionei o marcador $, que significa o final da string. E nesse caso específico, a regex poderia ser apenas /\/$/- termina com / - pois .* significa "zero ou mais caracteres" e nesse caso não faz diferença ("terminar com zero ou mais caracteres seguidos de /" é a mesma coisa que "terminar com /").

Se quiser, você pode fazer push de todo o match (pois o objeto contém mais informações, como por exemplo o índice em que ocorre o match, etc). No caso, eu optei por apenas pegar o caractere correspondente a (.?).

O if (match.index == r_match.lastIndex) é para corrigir um bug no caso de zero width matches (explicado em detalhes aqui).


Outra alternativa é não usar lookbehind e obter somente o grupo de captura correspondente à informação que você quer:

let regex = /([^\/]*\/)(.?)(?=@|-.+)/gi;
let s = './a@ ./x-fd';
console.log([...s.matchAll(regex)].map(m => m[2])); // [ 'a', 'x' ]

Como agora o trecho (.?) é o segundo par de parênteses da expressão, ele está no grupo 2, por isso usei m[2] (mas você poderia eliminar o map caso queira um array com os matches).

E mudei o ponto para [^\/] (qualquer caractere que não seja /), pois senão a regex pode acabar pegando mais caracteres do que deve (inclusive a própria barra), dando resultados incorretos (como pegar somente o x, por exemplo).

Se bem que neste caso, não precisa do primeiro parênteses (assim, a informação que eu quero estará no grupo 1):

let regex = /[^\/]*\/(.?)(?=@|-.+)/gi;
let s = './a@ ./x-fd';
console.log([...s.matchAll(regex)].map(m => m[1])); // [ 'a', 'x' ]

Por fim, a flag i serve para deixar a regex case insensitive (não diferencia letras maiúsculas e minúsculas). Mas como sua regex não tem letras, esta flag é desnecessária (pode deixar somente o g, que no seu caso não fará diferença).


Veja mais detalhes em "Negative lookbehind só funciona no Google Chrome, existe uma alternativa para os outros browsers?".

-3

Suporta a partir da versão 78, que foi lançada em junho de 2020.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#browser_compatibility

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .