Blog de Notícias

JavaScript replace()

JavaScript replace()

JavaScript replace()

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