Simplifique Suas Manipulações de Strings Com o ReplaceAll em JavaScript!

Reading time: 4 minutes

A linguagem de programação Javascript tem se tornado cada vez mais comum atualmente. Seja por sua facilidade ou por sua vasta quantidade de frameworks, ela vem sendo a principal linguagem dos desenvolvedores no momento. Ter um bom conhecimento em como e quando usar suas funções é fundamental. Neste sentido, veja quando usar, em javascript, replaceAll e nunca mais se confunda!

Como Surgiu o replaceAll?

Primeiramente, entenda que a função replaceAll nem sempre esteve presente na linguagem. Nos primórdios do javascript, era necessário trabalhar exaustivamente com Regular Expressions (Regex), o que era terrível para muitos programadores por conta da sintaxe específica que as Regex necessitavam.

Para driblar este problema, muitos programadores criavam suas próprias versões do que hoje é a função replaceAll. Veja por exemplo este post, de 2006. Hoje, felizmente contamos com esta função implementada na linguagem, não sendo necessários imports nem bibliotecas terceiras.

Como Funciona o replaceAll?

O método replaceAll tem uma forma muito simples de ser utilizada. Para entender melhor, vamos ao código:

const p = 'Hoje eu vou para a piscina';
console.log(p.replaceAll('piscina', 'festa'));

No exemplo acima, utilizamos uma string p, com valor ‘Hoje eu vou para a piscina’. Logo depois, utilizamos a função replaceAll junto a esta string e passamos 2 argumentos, ambos sendo strings.

Para entender melhor, vamos analisar o output deste código.

'Hoje eu vou para a festa'

Pronto, agora sim podemos entender como o replaceAll funciona. Lembre-se que, como vimos anteriormente, o método recebe 2 argumentos.

O primeiro argumento será o que o programa irá buscar na string principal p. Este argumento pode ser uma string normal, como o nosso caso ‘piscina’, ou pode ser um Regex, que neste caso seria /piscina/g. Lembre-se que, se resolver utilizar Regex, sempre deve utilizar a flag global /g no final.

O segundo argumento é uma nova string, que será a substituta para a nossa string do parâmetro 1, na string p. Além disso, podemos utilizar uma função como segundo argumento. Esta função será acionada sempre que o primeiro argumento for encontrado na string inicial. Um bom uso para funções como parâmetros do replaceAll são os contadores de palavras, que veremos mais adiante uma implementação simples.

Importante lembrar que este segundo parâmetro será sempre uma string, não sendo permitida a utilização de Regex.

Em resumo, o que o método replaceAll faz é: criar uma cópia da string original (no nosso caso a string p), buscar e trocar todas as aparições da substring ‘piscina’, por ‘festa’.

Por trabalhar com uma cópia da string original, ela se mantém inalterada do início ao fim do método, ou seja, se fizermos console.log(p), ainda teremos: ‘Hoje vou para a piscina’.

Quando Utilizar Este Método?

Agora que você já entendeu como funciona este método, será fácil perceber quando utilizá-lo. Em resumo, o método replaceAll será utilizado sempre que for necessário tratamento e/ou substituição de todas as partes de uma dada string em que uma outra substring, fornecida como parâmetro, apareça.

Um uso muito comum desta função é para o tratamento de preços em sites, afinal, uma string ‘R$10,00’ não é a mesma coisa que um inteiro 10. Uma boa utilização neste caso seria:

var valorString = 'R$10';
var valorInt = valorString.replaceAll('R$', '');
valorInt = parseInt(valorInt);

Um outro uso muito comum e já mencionado aqui é o de contador de palavras. Vamos imaginar que você gostaria de saber quantas palavras ‘bola’ existem em uma string qualquer. Vejamos uma implementação de replaceAll para este caso:

var numero;
var frase = " bala bola bobo boca bola boba bola boca bola bobo bola ";
frase.replaceAll(" bola ", contador());

function contador() {
  return numero++;
}
console.log(numero);
//OutPut=4

É importante, no entanto, lembrar que este método não tem compatibilidade com o navegador Internet Explorer.

Conclusão

Sem dúvidas é muito importante entender quando usar, em javascript, replaceAll. Mesmo que este método não seja difícil de entender, é de extrema necessidade entender melhor como ele funciona e qual a sua utilidade na rotina de um desenvolvedor.

Que tal implementar um projeto que utilize replaceAll como um contador de palavras? Comece agora mesmo a treinar seus conhecimentos!