Javascript Replace(): conheça esse método e aprenda como usar!

O JavaScript replace faz parte do conjunto de métodos disponíveis na linguagem para executar a manipulação de strings. Basicamente, é um recurso que permite a substituição de um trecho de uma string por outro conteúdo. Trata-se de um recurso muito útil, que pode ser usado, por exemplo, para adicionar a formatação em RG, alterar elementos de uma lista e muito mais.

Essa é apenas algumas das possibilidades desse recurso e veremos outras aplicações ao longo do texto. Antes, é preciso entender algumas particularidades do método para usá-lo da melhor forma. Pensando nisso, fizemos este conteúdo para mostrar:

  • O que é e como funciona o método JavaScript replace?
  • Qual é a sintaxe do método replace?
  • Como usar o recurso? Confira 5 exemplos práticos do método replace()
  • Qual é a compatibilidade com os navegadores?

Vamos lá? Boa leitura!

O que é e como funciona o método JavaScript replace?

A palavra replace significa substituir. É isso o que o método replace() faz, ou seja, substitui um trecho de uma string por outro e retorna a operação em uma nova string. É importante lembrar que o método replace() não altera o conteúdo da string original. Veja o exemplo a seguir.

var texto = "Vamos estudar programação?";
var novoTexto = texto.replace("programação", "JavaScript");
console.log(texto);
console.log(novoTexto);
/* saída:
Vamos estudar programação?
Vamos estudar JavaScript?
*/


Nesse exemplo, o método replace() localiza a palavra programação na variável texto, a altera para JavaScript e armazena o resultado na variável novoTexto. Perceba que, ao exibirmos na console as duas variáveis, a primeira continua com o conteúdo original, enquanto a alteração é armazenada na segunda string.

É importante dizer que o método replace() substitui a primeira ocorrência do valor informado. Por exemplo, se tivermos a frase “Vamos estudar programação? Você gosta de programação?” e aplicarmos o mesmo comando, a substituição da palavra para JavaScript só será feita no primeiro momento. Assim, o resultado da frase será: “Vamos estudar JavaScript? Você gosta de programação?”

Para que o replace() funcione em todas as ocorrências da palavra, é preciso adicionar a especificação global “g”. O mesmo vale se houver diferença na escrita com relação às letras maiúsculas ou minúsculas, pois o método é case sensitive. Nesse caso, é preciso incluir a flag “i”. Confira o código a seguir.

var texto = "Vamos estudar programação? Você gosta de programação? Estude Programação!";
var novoTexto = texto.replace(/programação/gi, "JavaScript");
console.log(novoTexto);
// saída: Vamos estudar JavaScript? Você gosta de JavaScript? Estude JavaScript!

Qual é a sintaxe do método replace?

O método replace() usa dois parâmetros específicos e retorna uma nova string. Confira a sintaxe a seguir.

stringOriginal.replace(subString, novaSubString)

No qual:

  • stringOriginal: representa o texto que servirá de base para a alteração;
  • subString: corresponde ao conteúdo a ser pesquisado na stringOriginal;
  • novaSubString: é o conteúdo que será substituído ao encontrar a subString na novaSubString.

O conteúdo do parâmetro subString pode ser passado tanto em formato de texto quanto por meio de uma expressão regular. Para saber mais sobre o assunto, acesse nosso post sobre expressões regulares e confira uma explicação excelente sobre como elas funcionam.

O parâmetro novaSubString também pode ser informado de diferentes formas. A primeira é por meio de uma string ou de uma função que retorna um conteúdo em string para que ele seja usado como parâmetro pelo método replace() na subString.

O símbolo “$” também pode ser usado de diferentes formas para substituir partes da string. Veja as opções disponíveis:

  • $$: substitui a string indicada pelo caractere $;
  • $&: ao encontrar a string, insere o conteúdo de reposição e adiciona o valor pesquisado;
  • $`: insere a nova string antes do valor encontrado;
  • $´: insere a nova string após o valor encontrado;
  • $n: cada valor de n corresponde ao argumento de uma expressão regular, portanto, uma expressão com três argumentos poderá ter $1, $2 e $3 como representação na string.

O parâmetro novaString também pode ser representado por uma função. É somente ao encontrar o valor pesquisado, ou seja, o conteúdo informado no parâmetro subString, que a função será executada. O valor retornado por ela será aplicado como a string de substituição ao termo encontrado. Confira os parâmetros para ela:

  • match: corresponde ao valor a ser pesquisado na string original;
  • p1, p2, …: representam os parâmetros possíveis de uma expressão regular, semelhante ao $n mencionado;
  • offset: representa a posição em que a string pesquisada foi encontrada;
  • string: corresponde ao valor da string original.

Como usar o recurso? Confira 5 exemplos práticos do método replace()

A melhor forma de visualizar como o método replace() funciona é por meio de exemplos práticos. Confira diferentes maneiras de usar esse recurso da linguagem JavaScript.

Exemplo 1

Em expressões regulares, é possível usar a especificação $n para representar cada grupo da expressão e da string correspondente. Confira o código a seguir.

var expressao = /(\w+)\s(\w+)\s(\w+)/;
var nomes = 'Pedro Paulo Maria';
var novosNomes = nomes.replace(expressao, '$3, $1 e $2 ');
console.log(novosNomes); 
//saída: Maria, Pedro e Paulo*/

Perceba que temos uma string com três nomes separados por espaço. Na variável expressão, criamos uma expressão regular que recupera três palavras, e o ponto de separação entre elas é o caractere de espaço representado pelo \s.

Por isso, podemos chamar cada palavra de $1, $2 e $3. O método replace(), portanto, fará a reordenação dos nomes da string conforme a nova orientação.

Exemplo 2

Outra aplicação para esse exemplo é a formatação do RG. Para isso, usamos um RG fictício apenas para demonstrar como fazer a separação dos caracteres e a formatação do valor informado com a ajuda do método replace(). Confira o exemplo a seguir.

var strRG = "999999999";
var stringRGResultado = strRG.replace(/(\d{2})(\d{3})(\d{3})(\d{1})/,"$1.$2.$3-$4");
console.log("O RG informado é: " + stringRGResultado);
//saída: O RG informado é: 99.999.999-9

Perceba que, no parâmetro referente à string pesquisada, definimos a expressão regular, que divide o texto informado em quatro grupos específicos. Cada um é dividido na quantidade de dígitos necessários para a formatação usada no RG.

Em seguida, informamos como será a máscara do RG e empregamos a referência $n para indicar cada grupo. Como temos quatro grupos, fizemos a formatação para adicionar os pontos e o hífen no local correto. Por fim, usamos o método replace() para aplicar a alteração desejada na stringRG.

Exemplo 3

Como mencionamos acima, existem diferentes formas de substituir trechos de uma string. Confira como o símbolo $ pode ser aplicado com o método replace(). 

var repetirString = 'JavaScript';
var resultado = repetirString.replace('JavaScript', 'Vamos substituir o texto e adicionar a palavra $&');
console.log(resultado);
// saída: Vamos substituir o texto e adicionar a palavra JavaScript

O método replace() retira o trecho encontrado em um texto e substitui pelo novo valor. Entretanto, se quisermos manter o valor da string original, podemos usar a indicação ‘$&’ para sinalizar essa necessidade. Nesse exemplo, empregamos o símbolo ‘$&’ para adicionar a string no final do novo texto inserido.

O posicionamento do símbolo indica em que local queremos inserir o conteúdo. Observe o algoritmo a seguir.

var adicionarStringAntes = 'Vamos estudar Script';
var stringAntes = adicionarStringAntes.replace('Script','Java$&');
console.log(stringAntes);
// saída: Vamos estudar JavaScript

Perceba que, na frase inicial, escrevemos a palavra Script e desejamos modificá-la para JavaScript. Por isso, ao usar o método, adicionamos o símbolo ‘$&’ na posição em que queremos fazer a alteração. Assim, a palavra Script é removida da string original e adicionada novamente após a palavra Java.

O mesmo acontece se queremos inserir o conteúdo após determinado texto. Confira o próximo exemplo:

var adicionarStringDepois = "Vamos estudar Java";
var teste = 'Script';
var stringDepois = adicionarStringDepois.replace('Java', '$&Script');
console.log(stringDepois);
// saída: Vamos estudar JavaScript


Agora queremos adicionar a palavra Script ao Java. Perceba que o símbolo ‘$&’ está no início da palavra Script, que é onde queremos inserir o texto correspondente.

Exemplo 4

O replace() também pode ser usado para modificar valores numéricos armazenados em strings. Vamos aplicar um desconto de 10% sobre o valor informado na string original e mostrar os novos valores calculados. Confira a depuração do código a seguir.

var valorCompra = "O valor da compra é de R$ 500.00." 
var valorComDesconto = valorCompra.replace(/(\d+).(\d+)/, function aplicarDesconto(valor) {
    let valordaCompra = parseFloat(valor);
    let desconto = 0;
    desconto = valordaCompra*0.1;
    return ((valordaCompra-desconto).toFixed(2) +
     ". Seu desconto foi de " + desconto.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }));
    });
console.log(valorComDesconto);
//saída: O valor da compra é de R$ 450.00. Seu desconto foi de R$ 50.00.


Nesse exemplo, usamos uma expressão regular para identificar no texto o valor numérico correspondente. Depois, criamos uma função chamada aplicarDesconto, que recebe como parâmetro o conteúdo encontrado na string valorCompra, que contém os dígitos numéricos, conforme determina a expressão regular. Em seguida, calculamos o desconto e exibimos o resultado na console do navegador.

Vale ressaltar que usamos a função parseFloat() para converter o valor de entrada de string para número com ponto flutuante. Além disso, empregamos a função toFixed() para determinar a quantidade de casas decimais e, por fim, a função toLocaleString() para formatar o desconto como moeda em Real.

Exemplo 5

Também é possível fazer a substituição de ocorrências de conteúdos diferentes com o método JavaScript string replace(). No próximo exemplo, criamos uma string com uma lista de compras e alguns itens relacionados. Em seguida, queremos alterar os elementos da lista. Veja o código abaixo.

var strLista = "Lista de compras: arroz, feijão, açúcar, óleo, Carne";
var listaSubstituicao = {
  arroz:"café",
  feijão:"macarrão",
  óleo:"vinagre",
  Carne:"ovos"
};
alteracaoLista = strLista.replace(/arroz|feijão|óleo|carne/gi, function(item){
    let it = listaSubstituicao[item];
    let itemLista = it.replace(/(?:^|\s)\S/g, function(elemento) { return elemento.toUpperCase(); });
    return itemLista;
});
console.log(alteracaoLista);
//saída: Lista de compras: Café, Macarrão, açúcar, Vinagre, Ovos


Em primeiro lugar, criamos a string original que contém uma lista de compras. Em seguida, criamos uma variável do tipo objeto que chamamos de listaSubstituição.

Perceba que, ao usarmos o método replace(), informamos os itens que desejamos alterar, separados pelo caractere “|”. Além disso, empregamos as flags gi para indicar a busca global na string e ignorar diferenças entre letras maiúsculas ou minúsculas.

Também criamos uma função que recebe cada elemento da lista e os usa para buscar a troca correspondente no objeto listaSubstituição. Por fim, recorremos à função toUpperCase() para transformar a inicial de cada elemento da lista em maiúscula.

Observe que, na lista original, temos o item açúcar, que não foi usado no método replace(). No resultado do código, ele permanece na posição original, e também não teve a inicial alterada para maiúscula.

Qual é a compatibilidade com os navegadores?

As pessoas que desenvolvem programas precisam ficar atentas ao usar os diversos recursos oferecidos na linguagem JavaScript. Afinal, podem ocorrer falhas durante a execução da aplicação web, especialmente em navegadores mais antigos. O método replace() funciona perfeitamente nas principais ferramentas:

  • Chrome;
  • Firefox;
  • Internet Explorer;
  • Opera;
  • Safari;
  • Chrome for Android;
  • Firefox Mobile;
  • IE Mobile;
  • Opera Mobile;
  • Safari Mobile.

O JavaScript replace() é um método usado na manipulação de strings. Trata-se de um recurso muito útil e pode ser empregado em diferentes situações conforme mostramos nos exemplos práticos acima. Por isso, é importante entender de que forma ele trabalha para usar ao máximo essa ferramenta da linguagem.

Gostou do nosso conteúdo sobre manipulação de strings? Não vá embora ainda! Confira nosso post sobre o que é uma função callback e como ela pode ser usada.