Artigos JavaScript JavaScript replace(): substituindo valores em uma string

JavaScript replace()

Nesta documentação de JavaScript veremos como utilizar o método replace(), que permite substituir uma sequência de caracteres por outra.

Apresentaremos aqui como utilizar o método replace().

JavaScript replace(): Na prática

  // Valor retornado: “Curso de PHP na DevMedia!”
  exemplo = "Curso de JavaScript na DevMedia!";
  resultado = exemplo.replace("JavaScript", "PHP");
   
  // Valor retornado: “Curso de PHP na DevMedia! JavaScript também.”
  exemplo = "Curso de JavaScript na DevMedia! JavaScript também.";
  resultado = exemplo.replace("JavaScript", "PHP");
   
  // Valor retornado: “Estudando PHP! PHP é uma linguagem dinâmica”
  exemplo = "Estudando JavaScript! JavaScript é uma linguagem dinâmica";
  resultado = exemplo.replace(/JavaScript/g, "PHP"); 
   
  // Valor retornado: “Aprendendo JavaScript. JavaScript é na DevMedia”
  exemplo = "Aprendendo Javascript. JAVAScript é na DevMedia "; 
  resultado = exemplo.replace(/javascript/gi, "JavaScript"); 
   
  // Valor retornado: “texto 1 <i> texto 2 </i> texto 3 <i> texto 4 </i>”
  stringExemplo = " texto 1 <b> texto 2 </b> texto 3 <b> texto 4 </b>";
  stringExemplo = stringExemplo.replace(/<b>/g , "<i>");
  resultado = stringExemplo.replace(/<\/b>/g, "</i>");
   
  // Valor retornado: “Contrato no valor de R$ 1050. 
  // Lucro de R$ 210 para a empresa.”
  string = "Contrato no valor de R$ 1000. Lucro de R$ 200 para a empresa.";
  resultado = string.replace(/\d+/g, function aplicarIndice(x){
  x = x*1.05;
  return Math.floor(x);});

Como funciona o replace()?

O método replace() percorre toda a string em busca da sequência de caracteres a ser substituída. Caso essa sequência de caracteres não seja encontrada, nenhuma substituição é realizada; caso seja encontrada, uma nova string, com a substituição feita, é devolvida pelo método.

Em caso de mais de uma string a ser substituída, replace() substituirá apenas a primeira delas. Caso seja necessário substituir todas, deve-se utilizar uma expressão regular no primeiro parâmetro.

Considerando o seguinte código:


  var exemplo = "Aprendendo JavaScript na DevMedia!";
  var resultado = exemplo.replace("JavaScript", "PHP");

O valor atribuído à variável

resultado será: “Aprendendo PHP na DevMedia!”, conforme a Figura 1.

Execução do método replace()
Figura 1. Funcionamento do método replace()

Sintaxe

string.replace(substring|expReg, novaSubstring|funcao)

Parâmetros

substring é a string a ser localizada e que deseja-se substituir.

expReg é uma expressão regular. Ao invés de informar uma substring é possível passar como parâmetro uma expressão regular.

novaSubstring é a string que deve substituir a substring ou os elementos encontrados pela expressão regular (expReg) informada no primeiro parâmetro.

funcao é a função que pode ser executada caso a substring ou a expressão regular seja validada dentro da string com o conteúdo a ser modificado.

Valor de retorno

É retornada a nova string com a substituição feita. Caso não haja substituição a fazer, a string original é retornada.

Exemplos de replace()

Exemplo 1

No exemplo a seguir substituímos um trecho de uma string por outro.


  var exemplo = "JavaScript é na DevMedia!";
  var resultado = exemplo.replace("JavaScript", "Java");

O valor atribuído a resultado é: “Java é na DevMedia!”

Run!
Exemplo 2

No exemplo a seguir demonstramos o que fazer para substituir mais de uma string.


  var exemplo = "Aprendendo JavaScript na DevMedia!    
    JavaScript é a linguagem do momento!!!";
  var resultado = exemplo.replace(/JavaScript/g, "PHP");

O valor atribuído a resultado é: “Aprendendo PHP na DevMedia! PHP é a linguagem do momento!!!”.

Ao invés de passar uma string no primeiro parâmetro foi informada uma expressão regular.

Run!
Exemplo 3

No exemplo a seguir demonstramos como substituir palavras desconsiderando a diferença entre letras maiúsculas e minúsculas (case-insensitive).


  var exemplo = "Substituindo JavaScript, Javascript e javascript por JS"; 
  var resultado = exemplo.replace(/javascript/gi, "JS");

O valor atribuído a resultado é: “Substituindo JS, JS e JS por JS”.

Run!
Exemplo 4

No exemplo a seguir demonstramos como formar um CPF sem os caracteres não numéricos para o formato correto.


  var cpf = "12345678901";
  var resultado = cpf.replace(/(\d{ 3 })(\d{ 3 })(\d{ 3 })(\d{ 2 })/, "$1.$2.$3-$4");

O valor atribuído a resultado é: “123.456.789-01”.

Run!
Exemplo 5

No exemplo a seguir demonstramos como substituir as tags <b> em um documento por tags <i>.


  var stringExemplo = "texto 1 <b> texto 2 </b> texto 3 <b> texto 4 </b>";
  stringExemplo = stringExemplo.replace(/<b>/g , "<i>");
  var resultado = stringExemplo.replace(/<\/b>/g, "</i>");

O valor atribuído a resultado é: “texto 1 <i> texto 2 </i> texto 3 <i> texto 4 </i>”.

Run!
Exemplo 6

No exemplo a seguir demonstramos como executar uma função para substituir/atualizar um valor presente em uma string.


var string = "Contrato no valor de R$ 1000. 
  Lucro de R$ 200 para a empresa.";
var resultado = string.replace(/\d+/g, function aplicarIndice(x) {
x = x*1.05;
return Math.floor(x);});

O valor atribuído a resultado é: “Contrato no valor de R$ 1050. Lucro de R$ 210 para a empresa.”.

O método replace() recebeu uma expressão regular no primeiro parâmetro que identificará qualquer número presente na string e como segundo parâmetro recebeu uma função. Essa função atualizará o valor numérico identificado e o multiplicará por 1.05.

Run!

Compatibilidade entre navegadores

replace() é suportado por todos os browsers apresentados na Tabela 1.

replace() Chrome Firefox IE Edge Safari Opera
Sim Sim Sim Sim Sim Sim

Tabela 1. Compatibilidade do método x browsers.

Métodos semelhantes