9

O regex /(?<!,),(?!,)/ apresenta instabilidade em algumas versões de browsers.

Encontrei esse regex no sistema da empresa que trabalho, e não entendi muito bem o objetivo dele. Aparentemente o problema está no <, no Edge não funciona, nem no Mozilla. Qual o problema com a expressão?

Teste no regex101.com.

Código que estava no prototype da String:

String.prototype.scapeSplit = function (v) {
        var r_split = new RegExp('(?<!' + v + ')' + v + '(?!' + v + ')');
        var r_replace = new RegExp(v + '{2}');

        var s = this.split(r_split);
        return s.map(function (x) {
            return x.replace(r_replace, v);
        });
    }
2
  • Hiago, a minha resposta original só funcionava quando o v tem apenas um caractere. Editei a resposta e adicionei uma solução mais geral, que funciona com strings de qualquer tamanho
    – hkotsubo
    Commented 18/03/2019 às 12:28
  • Suporta a partir da versão 78 do Mozilla Firefox, que foi lançada em junho de 2020. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Commented 10/10/2021 às 21:19

3 Respostas 3

14

Como já disseram nas outras respostas, o problema é o trecho (?<!,), que é um negative lookbehind. No caso, ele verifica se não existe uma vírgula antes do caractere desejado (que no caso, também é uma vírgula). Se tiver, a regex falha.

E logo em seguida temos (?!,), que é um negative lookahead, que verifica se não há uma vírgula depois. Portanto /(?<!,),(?!,)/ serve para capturar as vírgulas que não possuem uma outra vírgula antes ou depois, o que é outro modo de dizer que a regex não pega os casos em que há duas ou mais vírgulas seguidas (exemplo).

Como você está usando esta regex em um split, significa que a string será separada somente nas posições em que há uma vírgula (desde que não tenha uma vírgula antes ou depois). Ou seja, se tiver duas ou mais vírgulas seguidas, elas não são consideradas no split.

Obs: na época em que a pergunta foi feita, esta sintaxe não estava disponível em todos os browsers, como o Firefox (citado na pergunta). Mas vendo este link hoje - julho/2021 - podemos constatar que vários outros browsers, como Firefox e Edge, agora têm suporte (mas de qualquer forma, ainda não é algo implementado em todos, por isso a alternativa mais abaixo continua sendo uma opção).

Rodei o seu código no Chrome (código abaixo):

String.prototype.scapeSplit = function (v) {
  let r_split = new RegExp('(?<!' + v + ')' + v + '(?!' + v + ')');
  let r_replace = new RegExp(v + '{2}');

  let s = this.split(r_split);
  // split produz a lista ["ab", "cd,,ef", "gh,,,ij", "kl"]
  return s.map(function (x) {
      return x.replace(r_replace, v);
  });
}

let s = 'ab,cd,,ef,gh,,,ij,kl';

// ["ab", "cd,ef", "gh,,ij", "kl"]
console.log(s.scapeSplit(','));

Como o Chrome já suporta lookbehinds, o código rodou sem problemas. Vi que seu código primeiro faz o split. Usando a string 'ab,cd,,ef,gh,,,ij,kl' e fazendo o split com vírgula, a primeira regex quebra a string somente onde não há duas ou mais vírgulas seguidas.

Então o resultado é a lista ["ab", "cd,,ef", "gh,,,ij", "kl"]. Em seguida é feito um map nesta lista, substituindo duas vírgulas seguidas (v + '{2}', que resulta em ,{2}- duas vírgulas seguidas) por apenas uma. Ou seja, cd,,ef é transformado em cd,ef e gh,,,ij, em gh,,ij.

O resultado final é a lista ["ab", "cd,ef", "gh,,ij", "kl"].


Alternativa para os browsers que não suportam lookbehind

Como este recurso não é suportado em todos os browsers, a abordagem deve ser um pouco diferente. Em vez de split, vou usar o método match, e na regex usarei a flag g, que faz com que seja retornado um array com todos os matches encontrados.

Mas usarei uma regex diferente, já que a lógica será inversa. Enquanto no split eu coloco uma regex com as coisas que eu não quero no resultado final (vírgula que não tem outra vírgula antes ou depois), no match eu faço o oposto: coloco as coisas que eu quero que estejam no resultado final (no fundo, split e match são apenas dois lados da mesma moeda). Enfim, o que eu quero que esteja no resultado final é:

  • uma sequência de caracteres que não sejam vírgula
  • opcionalmente seguidos por uma sequência de duas ou mais vírgulas
  • esta sequência toda pode se repetir várias vezes (por exemplo, se tiver um trecho aa,,bb,,,cc,,,dd, tudo isso é um único elemento que o split não separou, então o match deve ter uma regex que considera tudo isso uma coisa só).

No caso, vou usar ([^,]+(,{2,})?)+. Explicando de dentro para fora:

  • [^,]+: O delimitador [^ representa uma classe de caracteres negados, ou seja, a regex considera qualquer caractere que não seja o que está entre [^ e ]. No caso, só tem a vírgula. E o quantificador + significa "uma ou mais ocorrências". Ou seja, é uma sequência de vários caracteres que não sejam vírgula.
  • (,{2,})?: o trecho ,{2,} significa "duas ou mais vírgulas", e o ? torna todo este trecho opcional. Isso quer dizer que pode ter uma sequência de várias vírgulas, ou não.
  • O + em torno de toda a expressão (agrupada entre parênteses) diz que isso pode se repetir várias vezes. Ou seja, todo o conjunto "vários caracteres que não são vírgula, seguidos ou não de várias vírgulas" pode se repetir várias vezes.

Isso garante que trechos como ab, ab,,cd e ab,,cd,,,ef serão considerados uma coisa só. Exemplo:

let matches = 'ab,cd,,ef,gh,,,ij,kl'.match(/([^,]+(,{2,})?)+/g);
console.log(matches); // ["ab", "cd,,ef", "gh,,,ij", "kl"]
 

O resultado foi o array ["ab", "cd,,ef", "gh,,,ij", "kl"], exatamente o mesmo que seu código original obtém antes do map. Ou seja, agora basta fazer o map e seu código está pronto:

String.prototype.scapeSplit = function (v) {
  let r_match = new RegExp('([^' + v  + ']+(' + v + '{2,})?)+', 'g');
  let r_replace = new RegExp(v + '{2}');

  let s = this.match(r_match);
  // match produz a lista ["ab", "cd,,ef", "gh,,,ij", "kl"]
  return s.map(function (x) {
      return x.replace(r_replace, v);
  });
}

let s = 'ab,cd,,ef,gh,,,ij,kl';

// ["ab", "cd,ef", "gh,,ij", "kl"]
console.log(s.scapeSplit(','));

O resultado será o array ["ab", "cd,ef", "gh,,ij", "kl"].


Expressões com mais de um caractere

A solução acima funciona bem quando o parâmetro passado para scapeSplit possui apenas um caractere.

Caso o parâmetro tenha mais de um caractere, há algumas modificações a serem feitas.

Se o browser suportar negative lookbehind (como é o caso do Chrome), basta corrigir a regex que faz o replace para:

let r_replace = new RegExp('(' + v + '){2}');

Caso v seja, por exemplo, a string 12: se não tiver parênteses, o resultado é 12{2} (o número 1, seguido de dois números 2). Mas eu quero na verdade (12){2} (duas ocorrências de 12). Corrigindo isso, você pode usar a string '12' no split que funcionará sem problemas, seguindo a mesma lógica da vírgula (só separar por 12 se não tiver outra ocorrência de 12 antes ou depois).


Caso o browser não suporte negative lookbehind, não podemos usar [^...] como foi feito acima, então a solução é um pouco mais complicada¹:

String.prototype.scapeSplit = function (v) {
  let r_match = new RegExp('(?:' + v + ')(?!(' + v + ')+)', 'g');
  let lookbehind = new RegExp(v + '$'); // simula o lookbehind
  let indices = [], match;
  // primeiro obtém os índices em que a expressão ocorre
  while (match = r_match.exec(this)) {
      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.exec(leftContext)) { // simular lookbehind negativo
          indices.push({ start: match.index, end: match.index + match[0].length });
      }
  }
  // agora faz o split pelas posições encontradas acima
  let pos = 0;
  let result = [];
  indices.forEach(i => {
      result.push(this.substring(pos, i.start));
      pos = i.end;
  });
  // não esquecer do último
  result.push(this.substring(pos));

  let r_replace = new RegExp('(' + v + '){2}');
  // o indices.forEach acima produz a lista result = ["ab", "cd1212ef", "gh121212ij", "kl"]
  return result.map(function (x) {
      return x.replace(r_replace, v);
  });
}

let s = 'ab12cd1212ef12gh121212ij12kl';

// ["ab", "cd12ef", "gh1212ij", "kl"]
console.log(s.scapeSplit('12'));

Se o parâmetro for, por exemplo, a string '12', a primeira regex (r_match) fica (?:12)(?!(12)+). Ou seja, a string 12, desde que não esteja seguida de uma ou mais ocorrências de 12.

Em seguida eu faço um while percorrendo todos os matches desta regex na string. A cada vez que encontro um, eu uso outra regex para simular o lookbehind. Eu faço isso obtendo uma substring que corresponde à string original, do início até o ponto em que o match foi encontrado (match.index). Se este trecho termina com a string indicada, quer dizer que o lookbehind encontrou uma repetição da string (mas como eu quero um negative lookbehind, eu faço if (!lookbehind.exec(leftContext))).

Por exemplo, se a string de entrada começar com ab12cd, o match é encontrado na posição 2 (onde começa o 12). Então eu faço um substring até a posição 2 (resultando em ab) e verifico se essa string termina em 12 (ou seja, estou simulando o que o lookbehind faria).

Então eu guardo o match.index (posição em que o match ocorreu) e match.index + match[0].length (posição em que ele termina = posição inicial do match mais o tamanho da string encontrada). Ao final deste while, eu tenho todas as posições em que os matches ocorreram. Com isso eu sei exatamente onde tenho que fazer o split.

Em seguida eu faço um forEach por esses índices, usando substring para pegar o trecho indicado e adiciono estas substrings em um array. No fim das contas eu apenas simulei o que o split faria caso o lookbehind fosse suportado.

Por fim, faço o replace para eliminar as repetições, tal como foi feito com a vírgula (lembrando de colocar os parênteses).

PS: o trecho if (match.index == r_match.lastIndex) r_match.lastIndex++; é feito para corrigir um bug para os casos de zero width matches (explicado neste link). Ele não ocorre para as strings e regex específicas que estamos usando, mas em todo caso fica o registro.


(1) - Esta solução que simula o lookbehind foi baseada neste livro.

1
  • 1
    Perfeito @hkotsubo me ajudou muito!! Obrigado. Commented 12/02/2019 às 11:04
7
/(?<!,),(?!,)/
  1. (?!) - negative lookahead
  2. (?<!) - negative lookbehind

O que falha no seu código é essa parte: (?<!), Lookbehinds só estão disponíveis em navegadores que suportam o padrão ECMA2018, e isso significa que apenas as versões mais recentes do Chrome podem lidar com elas. Mais: http://kangax.github.io/compat-table/es2016plus/

Seu regex é o seguinte:

Encontre , onde , não precede e , não segue, ou seja, encontre virgulas onde não tenha virgulas nem antes e depois. Veja que no seu regex101 onde tem ,,, não é retornado porque há virgulas antes e depois!

Uma alternativa é trocar o lookbehind por um código que seja compatível com outros navegadores

Fontes que usei como referência:

  1. Regex lookahead, lookbehind and atomic groups
  2. Javascript regex negative lookbehind not working in firefox
  3. Retirar uma parte da URL
7
  • Obrigado Marconi, como eu faria isso no ECMA2015? Commented 11/02/2019 às 19:54
  • Só um minuto @HiagoSouza estou bolando uma maneira!
    – Marconi
    Commented 11/02/2019 às 19:56
  • Muito obrigado @Marconi. Commented 12/02/2019 às 10:56
  • 1
    Sua resposta foi de grande ajuda, porém a resposta abaixo está mais completa e é injusto eu marcar a sua como correta, espero que não se chateie. Commented 12/02/2019 às 10:58
  • 1
    @HiagoSouza concordo plenamente com você, eu achei que seu problema era simples e acabei enganado e sem tempo, vou até remover minha sugestão de código. Inclusive editar a sua pergunta pra mais visibilidade.
    – Marconi
    Commented 12/02/2019 às 11:00
3

Aparentemente o problema está no < no Edge não funciona, nem no Mozila. Qual o problema com a expressão?

O problema com a expressão é que ela utiliza o negative lookbehind (?<!).

Esse tipo assertion não é suportada por todos os browsers, só aqueles que utilizam o padrão ECMA2018.

Suas opções são:
Fazer a primeira varredura regex e após isso inverter o texto e utilizar novamente o positive lookahead já disponível na versão do ECMA2015, não recomendo fazer isso com grandes fluxos de dados, pois a performance será afetada ou esperar a atualização e não disponibilizar essa feature conforme identificação do browser utilizado.

Você deve fazer log-in para responder a esta pergunta.

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