Dominando o replace() do JavaScript: Guia Completo com Regex, Callbacks e Boas Práticas

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 é uma tarefa comum ao lidar com entrada de usuário ou ao processar dados. Dentre elas, o método replace() é conhecido como uma ferramenta poderosa que torna a substituição de strings simples e eficiente.
Neste artigo, explicaremos detalhadamente o método replace() do JavaScript, desde o básico até técnicas avançadas. Cobrir‑emos não apenas o uso básico, mas também substituições avançadas usando expressões regulares e exemplos práticos, tornando o conteúdo ú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. Com esse método, você pode editar ou transformar dados de string de forma eficiente.

Sintaxe

string.replace(pattern, replacement)

• pattern : A string ou expressão regular a ser pesquisada.
• replacement : A string que substituirá, 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

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

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

O que é uma Expressão Regular?

Expressões regulares são ferramentas poderosas usadas para representar padrões de strings. No JavaScript, você pode usar regex para realizar facilmente buscas e substituições complexas.

Exemplo: Substituição com 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 ocorrências)
• i : Substituição sem distinção de mai/minúsculas
• m : Modo multilinha

Exemplo: Substituição sem distinção de maiúsculas/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, use a flag g na sua regex.

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

Técnica: 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 vários padrões de uma vez, melhorando a legibilidade do código.

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

O que é uma Função de Callback?

Uma função de callback é invocada durante o processo de substituição e pode usar informações da correspondência para personalizar o resultado.

Exemplos de Substituição Dinâmica

1. Trocar a Ordem da String

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

2. Converter Formato 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 são considerados metacaracteres com significados especiais. Para usá‑los literalmente em buscas ou substituições, você precisa escapá‑los com 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 Sinal 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. Exemplos Práticos e Técnicas Avançadas

Convertendo Quebras de Linha em Tags

let text = "HellonWorldnJavaScript";
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 e Melhores Práticas

Apenas a Primeira Ocorrê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 e 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."

Evite Faltas de Escapes para 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 de substituição do método replace().
• Aplicações de Regex: Aprendido como usar expressões regulares e flags para substituições avançadas.
• Funções de Callback: Coberta como realizar substituições dinâmicas com exemplos práticos.
• Exemplos Práticos: Introduzidas técnicas úteis em aplicações do mundo real, como manipulação de URL e sanitização.
• Melhores Práticas: Explicadas notas e considerações de desempenho em detalhes.

Pensamentos Finais

O método replace() do JavaScript é uma ferramenta versátil que pode ser aplicada desde cenários básicos até avançados. Continuaremos a fornecer informações úteis sobre JavaScript, então fique ligado!