38

Qual a forma correta de se fazer uma substituição regular em JavaScript para todas as ocorrências encontradas?

A forma como faço atualmente:

var i = 0;
while ((i = str.indexOf("_", i)) != -1) {
    str = str.replace("_", " ");
}

Ou até:

str = str.split("_").join(" ");

Não me parecem ser as mais adequadas.

4 Respostas 4

57

Use uma expressão regular no primeiro argumento de replace com a flag g (global):

str = str.replace(/_/g, ' ');

Leia mais:

6
  • Fiz testes com as 3 maneiras e verifiquei que esta é realmente a mais rápida. Utilizando split é bem rápida também, mas com regex é melhor. Commented 12/12/2013 às 11:37
  • @DanielT.Sobrosa É, regex é uma boa ferramenta pra ter no cinturão. =) Btw, obrigado pela edição -- tive que aplicá-la manualmente porque a interface de revisão bugou. Não sei se foi algo local -- se aparecer de novo, eu reporto.
    – elias
    Commented 12/12/2013 às 11:41
  • 4
    Tome cuidado somente no caso de sua string conter caracteres com significado especial em expressões regulares (., +, *, [ etc.). Nesta solução, tais caracteres devem ser "escapados" com '\'. Veja stackoverflow.com/questions/3561493/…
    – rodrigorgs
    Commented 12/12/2013 às 11:42
  • @rodrigorgs É, nesses casos é bom testar ali no RegexPal, por isso já botei o link. =)
    – elias
    Commented 12/12/2013 às 11:45
  • Certo, muito obrigado. Commented 12/12/2013 às 12:22
15

Aqui está uma forma:

String.prototype.replaceAll = String.prototype.replaceAll || function(needle, replacement) {
    return this.split(needle).join(replacement);
};

É só colocá-lo antes de qualquer outro script que use replaceAll. Use-o da seguinte da forma:

 var novaString = 'foo bar foo'.replaceAll('foo', 'baz');
 console.log(novaString); //"baz bar baz"

Embora colocar a função no protótipo seja bem cômodo, há algumas razões para não fazê-lo -- caso uma biblioteca, script ou nova especificação do ECMAScript defina um outro String.prototype.replaceAll com assinatura ou comportamento diferentes haveria conflito. Podemos converter isto em uma simples função para sermos mais à prova de futuro:

function replaceAll(str, needle, replacement) {
    return str.split(needle).join(replacement);
}
console.log( replaceAll('foo bar foo', 'foo', 'baz') ); //"baz bar baz"

Qual o problema com usar regex?

Nenhum, na verdade. Porém, acredito ser muito mais fácil trabalhar com strings. Caso você deseje criar um regex a partir de uma string arbitrária, é necessário escapar todos os meta-caracteres. Outro método utilizando regex:

String.prototype.replaceAll || (function() {
    var regMetaChars = /[-\\^$*+?.()|[\]{}]/g;
    String.prototype.replaceAll = function(needle, replacement) {
        return this.replace(new RegExp(needle.replace(regMetaChars, '\\$&'), 'g'), replacement);
    };
}());

Mas não é mais fácil escrever um regex literal?

Isto vai depender do seu caso de uso. Se você não tiver muito conhecimento sobre Regex, você poderá encontrar erros de sintaxe ou resultados inesperados se não escapar os meta-caracteres apropriadamente. Por exemplo:

'a.a'.replace(/./g, ','); //Qual o resultado?

Um usuário sem experiência com Regex esperaria "a,a", mas como o ponto final é um meta-caractere que representa uma classe de caracteres contendo todos caracteres (exceto quebras de linha), o resultado da expressão acima é ",,,". A regex correta seria /\./g, o que substituiria apenas o caractere ..

Mesmo que você tenha pleno conhecimento de todos meta-caracteres que precisam ser escapados, outro ponto importante é quando o texto a ser substituído (needle) é uma variável cujo conteúdo possa ser desconhecido. Então é necessário escapar todos possíveis meta-caracteres através de mais um replace antes de passá-la ao construtor RegExp (já que não é possível colocar uma variável dentro da sintaxe literal de objetos RegExp).

Portanto é mais fácil utilizar uma função quando seu caso de uso exigir algo mais complexo.


Não seria mais fácil simplesmente fazer um loop enquanto o needle é encontrado?

Exite um problema com o código do OP. Vamos colocá-lo em uma função e analisarmos:

function replaceAll(str, needle, replacement) {
    var i = 0;
    while ((i = str.indexOf(needle, i)) != -1) {
        str = str.replace(needle, replacement);
    }
    return str;
}

O indexOf e replace de cada iteração começam a escanear a string a partir de seu início. Isto gera bugs em certos casos:

replaceAll('bbaa', 'ba', ''); //Qual o resultado?

Esperaríamos que o método encontrasse o needle (destacado entre colchetes) b[ba]a, substituísse-o por uma string vazia, não encontrasse mais nenhum needle a parte da posição atual e retornasse ba. No entanto, como o escaneamento recomeça do inicio da string a cada iteração, esta função encontra ba uma segunda vez e o retorno é uma string vazia.

Para concertar isto é necessário passar o i como o segundo argumento do indexOf() (fromIndex), e já que o replace() não possui um parâmetro fromIndex seria necessário substring/substr/slice para simulá-lo, o que tornaria o código um pouco mais complexo, mas também funcional:

String.prototype.replaceAll = String.prototype.replaceAll || function(needle, replacement) {
    var str = this,
        i = 0,
        l = needle.length;
    while (~(i = str.indexOf(needle, i))) {
        str = str.substr(0, i) + str.substr(i+l);
    }
    return str;
};
5
  • 1
    Que história de "p(r)olyfill" é essa? E bem-vindo ao site!
    – bfavaretto
    Commented 3/02/2014 às 5:50
  • 2
    @bfavaretto bom, você sabe que polyfill é um código para implementar funcionalidade padronizada que o browser não tem implementada nativamente, já o prolyfill é similar só que sem a funcionalidade ter sido padronizada ainda. :) O prolyfill serve mais com o intuito de promover a padronização do mesmo, mas realmente, acho que acabei forçando um pouco nesta. Vou reescrever essa parte mais tarde. E obrigado pelas boas vindas. =] Commented 3/02/2014 às 5:59
  • 1
    Hmmm... Ignorância sobre regex não tem muito a ver com "caso de uso". Para quem não sabe regex, é bom que aprenda -- vai ser útil para o resto da vida, e dá muito mais poder para os casos complexos. Sobre o escape de metacaracteres, uma dica interessante é saber que a maioria dos caracteres (exceto ^ e -) funcionam como literais dentro de [].
    – elias
    Commented 3/02/2014 às 10:56
  • @elias Concordo! Não consigo me imaginar sem regex hoje em dia (ainda mais porque também trabalho no back-end). Acredito que vários developers focados em front não vêem muito uso para regex, embora tenha suas utilidades mesmo no front. O caso de uso que eu tinha em mente seria utilizar uma string arbitrária (variável de conteúdo desconhecido) como needle já que não é possível escrever uma regex literal com ela e é necessário escapar os meta-caracteres, o que é bem mais complexo do que o caso de uso onde o needle é fixo e basta escrever uma simples regex literal. Commented 3/02/2014 às 12:09
  • @FabrícioMatté Entendi! Para substituição de um padrão dinâmico realmente faz mais sentido usar uma substituição de strings tradicional.
    – elias
    Commented 3/02/2014 às 12:26
3

A forma mais correta (e recomendada) é como @elias respondeu, via regex.

A título de curiosidade, a engine do Firefox (SpiderMonkey) implementa um paramêtro a mais no método replace chamado de flags que aceita as mesmas flags normalmente utilizada com regex.

Exemplo:

>>> "Ah é natal... Feliz Natal!".replace("natal", "ano novo", "gi")  
"Ah é ano novo... Feliz ano novo!"

Não recomendo utilizar este método, ele não é padrão. Provavelmente não funcionará no Internet Explorer nem no Chrome (V8).

0

Uma forma simples seria:

var boia1 = 'Posição+Projeto+-+Boia+8'
    while(boia1.includes('+'))
    {
        boia1 = boia1.replace('+', ' ');
    }

    //Result: 'Posição Projeto - Boia 8'
2

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 .