Como substituir um texto no JavaScript

Textos e strings / Tutorial JavaScript

O método replace é usado para substituir partes de uma string por outro texto. Ele é muito útil para manipulação de texto em JavaScript.

Sintaxe básica

A sintaxe básica do replace é:

string.replace(valorASubstituir, novoValor)

Exemplo:

let texto = "Olá, mundo!"
let novoTexto = texto.replace("mundo", "JavaScript")

console.log(novoTexto)

Saída:

Olá, JavaScript!

Substituir todas as ocorrências com replaceAll

O método replaceAll é uma alternativa ao uso de expressões regulares com a flag g. Ele substitui todas as ocorrências de um valor diretamente.

Exemplo:

let texto = "JavaScript é incrível. JavaScript é poderoso."
let novoTexto = texto.replaceAll("JavaScript", "JS")

console.log(novoTexto)

Saída:

JS é incrível. JS é poderoso.

Substituir todas as ocorrências expressão regular

Por padrão, o replace substitui apenas a primeira ocorrência. Para substituir todas, use uma expressão regular com a flag g.

Exemplo:

let texto = "JavaScript é incrível. JavaScript é poderoso."
let novoTexto = texto.replace(/JavaScript/g, "JS")

console.log(novoTexto)

Saída:

JS é incrível. JS é poderoso.

Diferença entre replace e replaceAll

  • replace substitui apenas a primeira ocorrência, a menos que você use uma expressão regular com a flag g.
  • replaceAll substitui todas as ocorrências sem a necessidade de expressões regulares.

Substituições avançadas com uma função

Você pode passar uma função como segundo argumento para manipular o texto dinamicamente.

Exemplo:

let texto = "1 maçã, 2 bananas, 3 cerejas"
let novoTexto = texto.replace(/\d+/g, (numero) => numero * 2)

console.log(novoTexto)

Saída:

2 maçãs, 4 bananas, 6 cerejas

Dicas práticas

  1. Use expressões regulares para maior flexibilidade.
  2. Lembre-se de que o replace não altera a string original, ele retorna uma nova string.
  3. Combine com outros métodos para manipulações mais complexas.

Com o replace, você pode realizar substituições simples ou avançadas de forma eficiente. Experimente usá-lo em seus projetos!