Javascript replace

Introdução

O replace serve para localizar e substituir um caracter ou uma sequencia de caracteres dentro de uma string, por outra sequencia de caracteres.

Pode ser utilizado para tirar caracteres especiais, pontos e traços, operadores, cifras monetárias e outras partes indesejadas de um texto.

Primeiro exemplo

Suponhamos que a gente tenha a string “eu amo Javascript” e queremos trocar a palavra “Javascript” por “PHP”, utilizaremos o replace para esse fim.

Na imagem abaixo temos o exemplo de um replace, o primeiro parâmetro, será o valor que desejamos localizar para que ele seja trocado:

O segundo parâmetro é a string que vai entrar no lugar da encontrada, e teremos o seguinte resultado:

O replace sempre irá retornar a nova string e você pode pegá-lo utilizando uma variável.

Replace com Regex

Utilizar a expressão regular é importante, pois você pode trocar todas as ocorrências de uma string, além de poder trabalhar com mais opções, como ignorar case sensitive e entre outras.

Utilizaremos o Regex no primeiro parâmetro do replace, que pode ser tanto uma string, ou um regex, então teremos o seguinte código:

let texto = "eu amo o Javascript, o Javascript é uma excelente linguagem de programação";
let textoAtualizado = texto.replace(/Javascript/g, "PHP");
console.log(textoAtualizado); //eu amo o PHP, o PHP é uma excelente linguagem de programação

Regex é um assunto muito grande, ainda mais com o replace, mas basicamente falando sobre o primeiro parâmetro, tudo que está entre as barras, é o que será pesquisado na string texto, e a flag “g” indica que queremos localizar a trocar todas as ocorrências.

Retirando o case sensitive do replace com o regex

Para fazer o replace trocar todas as palavras “Javascript” no texto, independente da forma na qual ela está escrita, seja com letra maiúscula, minúscula ou até alternado, passamos a flag “i” na frente do “g”, dessa forma:

let texto = "eu amo o JAVAscrIPT, o Javascript é uma excelente linguagem de programação";
let textoAtualizado = texto.replace(/Javascript/gi, "PHP");
console.log(textoAtualizado); //eu amo o PHP, o PHP é uma excelente linguagem de programação

Replace com função

O segundo parâmetro do replace, pode ser uma string ou uma função, que ela pode ser utilizada para o processamento de dados, para checagem da string e entre outras coisas, vamos ver um exemplo:

let texto = `Javascript - eu amo o Javascript, o Javascript é uma excelente linguagem de programação`;
let textoAtualizado = texto.replace(/Javascript/gi,  (valor, index, original) => {
        if (index !== 0) {
            return "PHP";
        } else {
            return valor;
        }
});
console.log(textoAtualizado); //Javascript - eu amo o PHP, o PHP é uma excelente linguagem de programação

Nesse caso, utilizamos a função para verificar se a palavra “Javascript” estava na primeira posição, se estiver, gostaríamos de manter a mesma, e trocar só as próximas ocorrências, e a função nos ajudou nisso.

A função, recebe 3 parâmetros, o primeiro é o valor que foi encontrado, no nosso exemplo, o que estará dentro da variável “valor” é a palavra “Javascript”. O segundo parâmetro é o index, ele é um número que representa a posição na qual o “valor” se encontra, voltando para o nosso exemplo, a primeira vez que encontra a palavra “Javascript” e entra na função, o index vai ser 0, pois está na primeira posição da string, a segunda vez que a palavra “Javascript” aparece o index vai conter 22, pois está na posição 22 dentro da string e assim sucessivamente. O terceiro parâmetro estará a string original por completo, caso você queira utilizar, se não quiser é só ocultar o parâmetro.

Exemplo prático

Para ver essa explicação mais detalhada e ver também um exemplo prático de uso no dia-a-dia, gravei um vídeo relacionado ao assunto:

Conclusão

O replace é muito útil, eu particularmente sempre utilizo para resolver determinados problemas e ele pode ter algumas variações que são interessantes e com certeza podem ajudar na sua lógica, espero que tenha gostado do artigo e espero que tenha te ajudado, até o próximo post 🙂

Referências

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/replace