JavaScript replace(): Guía completa con ejemplos y mejores prácticas

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

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

1. Introducción

2. Fundamentos del método replace()

¿Qué es el método replace()?

Sintaxis

string.replace(pattern, replacement)

• pattern: La cadena o expresión regular a buscar.
• replacement: La cadena de sustitución o una función de callback.

Uso básico

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

Notas importantes

1. replace() sustituye solo la primera coincidencia.
2. Si deseas reemplazar todas las coincidencias, debes usar una expresión regular con el modificador g.

3. Reemplazos avanzados con expresiones regulares

¿Qué es una expresión regular?

Ejemplo de reemplazo con expresiones regulares

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

Tipos de banderas

• g: Reemplazo global (todas las coincidencias)
• i: Ignora mayúsculas/minúsculas
• m: Modo multilínea

Ejemplo práctico: reemplazo sin distinguir mayúsculas/minúsculas

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

4. Reemplazo en múltiples posiciones

Reemplazo global

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

Técnica para reemplazar múltiples cadenas diferentes

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"

5. Reemplazos dinámicos con funciones de callback

¿Qué es una función de callback?

Ejemplos de reemplazos dinámicos

1. Invertir el orden de las palabras

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

2. Convertir formato de fecha

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. Manejo de caracteres especiales y secuencias de escape

¿Qué son los caracteres especiales?

Reemplazo de cadenas con caracteres especiales

Ejemplo 1: Reemplazar un punto

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

Ejemplo 2: Eliminar el símbolo de dólar

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

Reemplazo de caracteres escapados en HTML

Ejemplo: Escapar etiquetas 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 prácticos y técnicas aplicadas

Convertir saltos de línea en etiquetas <br>

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

Manipulación de parámetros en URLs

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"

Sanitización de entradas de usuario

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. Precauciones y buenas prácticas

Recuerda que solo se reemplaza la primera coincidencia

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

Atención a mayúsculas y 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."

Escapar correctamente caracteres especiales

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. Conclusión

Resumen del artículo

• Uso básico: Explicamos la sintaxis y ejemplos simples del método replace().
• Expresiones regulares: Aprendimos cómo aplicar patrones y banderas para reemplazos avanzados.
• Funciones callback: Vimos cómo realizar sustituciones dinámicas y personalizadas.
• Casos prácticos: Mostramos técnicas útiles como manipulación de URLs y sanitización de datos.
• Buenas prácticas: Señalamos precauciones comunes y cómo optimizar el rendimiento.

Comentario final