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.

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 em um documento por tags .


  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 texto 2 texto 3 texto 4 �.

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
replace()	Sim	Sim	Sim	Sim	Sim	Sim

Tabela 1. Compatibilidade do m�todo x browsers.

JavaScript replace(): substituindo valores em uma string

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