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.

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 <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

Veja esse e muitos outros conteúdos!Seja PRO

Artigos relacionados