Método replace() de String em JavaScript Explicado: Conceitos Básicos, Regex e Exemplos Práticos

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introdução

JavaScript é uma das linguagens de programação mais amplamente usadas no desenvolvimento web. Em particular, a manipulação de strings é um recurso frequentemente utilizado ao lidar com entrada de usuário e processamento de dados. Entre esses recursos, o método replace() é conhecido como uma ferramenta poderosa que permite realizar operações de substituição de strings de forma simples.

Neste artigo, explicaremos detalhadamente o método replace() do JavaScript, desde o básico até o uso avançado. Além de exemplos fundamentais, também abordaremos substituições avançadas usando expressões regulares e casos de uso práticos do mundo real. Este conteúdo foi projetado para ser útil tanto para iniciantes quanto para desenvolvedores intermediários.

2. Conceitos Básicos do Método replace()

O que é o método replace()?

O método replace() é uma função nativa do JavaScript usada para substituir partes específicas de uma string por outra string. Ao usar esse método, você pode editar e transformar dados de string de maneira eficiente.

Sintaxe

string.replace(pattern, replacement)

• pattern : A string ou expressão regular a ser pesquisada.
• replacement : A string de substituição ou uma função de callback.

Uso Básico

O exemplo a seguir demonstra uma substituição simples de string.

let text = "Hello, world!";
let result = text.replace("world", "JavaScript");
console.log(result); // "Hello, JavaScript!"

Neste código, a string “world” é substituída por “JavaScript”.

Observações Importantes

1. replace() substitui apenas a primeira ocorrência encontrada.
2. Para substituir todas as ocorrências encontradas, você deve usar uma expressão regular com a flag g.

3. Substituição Avançada Usando Expressões Regulares

O que são Expressões Regulares?

Expressões regulares são ferramentas poderosas para descrever padrões de strings. No JavaScript, as expressões regulares permitem que você execute facilmente correspondências complexas de padrões e operações de substituição.

Exemplos de Substituição Usando Expressões Regulares

let text = "apple, banana, apple";
let result = text.replace(/apple/g, "orange");
console.log(result); // "orange, banana, orange"

Tipos de Flags

• g : Substituição global (substitui todas as correspondências)
• i : Substituição sem distinção entre maiúsculas e minúsculas
• m : Modo multilinha

Exemplo Avançado: Substituição Insensível a Maiúsculas e Minúsculas

let text = "Hello, hello, HELLO";
let result = text.replace(/hello/gi, "hi");
console.log(result); // "hi, hi, hi"

4. Substituindo Múltiplas Ocorrências

Substituindo Todas as Ocorrências

Para substituir todas as ocorrências correspondentes em uma string, use a flag g em uma expressão regular.

let text = "cat dog cat bird";
let result = text.replace(/cat/g, "fish");
console.log(result); // "fish dog fish bird"

Técnica para Substituir Várias Strings Diferentes de Uma Só Vez

let text = "red blue green";
let replacements = {red: "pink", blue: "cyan", green: "lime"};

Object.keys(replacements).forEach(key => {
  let regex = new RegExp(key, "g");
  text = text.replace(regex, replacements[key]);
});

console.log(text); // "pink cyan lime"

Essa abordagem permite substituir múltiplos padrões de uma vez, melhorando a legibilidade do código.

5. Substituição Dinâmica Usando Funções de Callback

O que é uma Função de Callback?

Uma função de callback é invocada durante o processo de substituição e permite que você personalize a operação usando as informações da correspondência atual.

Exemplos de Substituição Dinâmica

1. Reordenando Strings

let text = "Tanaka, Taro";
let result = text.replace(/(\w+), (\w+)/, (match, p1, p2) => {
  return `${p2} ${p1}`;
});
console.log(result); // "Taro Tanaka"

2. Convertendo Formatos de Data

let date = "2024-12-25";
let formattedDate = date.replace(/(\d{4})-(\d{2})-(\d{2})/, (match, year, month, day) => {
  return `${month}/${day}/${year}`;
});
console.log(formattedDate); // "12/25/2024"

6. Tratamento de Caracteres Especiais e Sequências de Escape

O que são Caracteres Especiais?

Em expressões regulares, certos caracteres têm significados especiais como metacaracteres. Para usar esses caracteres literalmente em operações de busca ou substituição, você deve usar sequências de escape.

Substituindo Strings que Contêm Caracteres Especiais

Exemplo 1: Substituindo uma String que Contém um Ponto

let text = "www.example.com";
let result = text.replace(/\./g, "-");
console.log(result); // "www-example-com"

Exemplo 2: Removendo o Símbolo de Dólar

let price = "$1,000";
let result = price.replace(/\$/g, "");
console.log(result); // "1,000"

Substituindo Caracteres de Escape HTML

Exemplo: Escapando Tags HTML

let html = "<div>Hello!</div>";
let result = html.replace(/</g, "&lt;").replace(/>/g, "&gt;");
console.log(result);
// "&lt;div&gt;Hello!&lt;/div&gt;"

7. Casos de Uso Práticos e Técnicas Avançadas

Convertendo Quebras de Linha em Tags <br>

let text = "Hello\nWorld\nJavaScript";
let result = text.replace(/\n/g, "<br>");
console.log(result);
// "Hello<br>World<br>JavaScript"

Manipulando Parâmetros de URL

let url = "https://example.com/?id=123&lang=en";
let result = url.replace(/lang=en/, "lang=ja");
console.log(result);
// "https://example.com/?id=123&lang=ja"

Sanitizando Entrada do Usuário

function sanitizeInput(input) {
  return input.replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

let userInput = "<script>alert('XSS');</script>";
let safeInput = sanitizeInput(userInput);
console.log(safeInput);
// "&lt;script&gt;alert('XSS');&lt;/script&gt;"

8. Notas Importantes e Boas Práticas

Esteja Ciente de que Apenas a Primeira Correspondência é Substituída

let text = "apple apple orange";
let result = text.replace("apple", "banana");
console.log(result); // "banana apple orange"

Preste Atenção à Sensibilidade a Maiúsculas/Minúsculas

let text = "JavaScript is powerful. javascript is versatile.";
let result = text.replace(/javascript/gi, "JS");
console.log(result);
// "JS is powerful. JS is versatile."

Não Se Esqueça de Escapar Caracteres Especiais

function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

let text = "Price: $100";
let result = text.replace(new RegExp(escapeRegExp("$"), "g"), "USD ");
console.log(result);
// "Price: USD 100"

9. Conclusão

Resumo do Artigo

• Uso básico: Explicada a sintaxe e exemplos simples do método replace().
• Aplicações de expressões regulares: Coberto como usar expressões regulares e flags para operações avançadas de substituição.
• Funções de callback: Demonstradas técnicas de substituição dinâmica com exemplos práticos.
• Exemplos práticos: Introduzidas técnicas úteis como manipulação de URL e sanitização de entrada.
• Boas práticas: Explicadas advertências importantes e considerações relacionadas ao desempenho.

Considerações Finais

O método JavaScript replace() é uma ferramenta versátil e poderosa que pode ser usada efetivamente desde cenários básicos até avançados. Continuaremos a fornecer conteúdo útil relacionado ao JavaScript, então fique atento.