Método replace() de JavaScript explicado: conceptos básicos, expresiones regulares y ejemplos prácticos

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

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

1. Introducción

JavaScript es uno de los lenguajes de programación más utilizados en el desarrollo web. En particular, la manipulación de cadenas es una característica frecuentemente usada al manejar la entrada del usuario y el procesamiento de datos. Entre estas características, el método replace() es conocido como una herramienta poderosa que permite realizar operaciones de sustitución de cadenas de forma sencilla.

En este artículo explicaremos a fondo el método replace() de JavaScript, desde los conceptos básicos hasta usos avanzados. Además de ejemplos fundamentales, también cubriremos sustituciones avanzadas usando expresiones regulares y casos de uso prácticos del mundo real. Este contenido está diseñado para ser útil tanto para principiantes como para desarrolladores intermedios.

2. Conceptos básicos del método replace()

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

El método replace() es una función incorporada de JavaScript que se utiliza para reemplazar partes específicas de una cadena por otra cadena. Al usar este método, puedes editar y transformar datos de texto de manera eficiente.

Sintaxis

string.replace(pattern, replacement)

• pattern : La cadena o expresión regular que se busca.
• replacement : La cadena de sustitución o una función de devolución de llamada.

Uso básico

El siguiente ejemplo muestra una sustitución simple de una cadena.

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

En este código, la cadena «world» se reemplaza por «JavaScript».

Notas importantes

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

3. Sustitución avanzada usando expresiones regulares

¿Qué son las expresiones regulares?

Las expresiones regulares son herramientas poderosas para describir patrones de texto. En JavaScript, las expresiones regulares permiten realizar coincidencias y sustituciones complejas de forma sencilla.

Ejemplos de sustitución usando expresiones regulares

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

Tipos de modificadores

• g : Sustitución global (reemplaza todas las coincidencias)
• i : Sustitución sin distinción de mayúsculas/minúsculas
• m : Modo multilínea

Ejemplo avanzado: sustitución sin distinción de mayúsculas/minúsculas

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

4. Reemplazo de múltiples ocurrencias

Reemplazar todas las coincidencias

Para reemplazar todas las ocurrencias que coincidan en una cadena, utiliza el modificador g en una expresión regular.

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

Técnica para reemplazar varios textos diferentes a la 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"

Este enfoque permite sustituir múltiples patrones simultáneamente mientras mejora la legibilidad del código.

5. Reemplazo dinámico usando funciones de devolución de llamada

¿Qué es una función de devolución de llamada?

Una función de devolución de llamada se invoca durante el proceso de sustitución y permite personalizar la operación utilizando la información de la coincidencia actual.

Ejemplos de reemplazo dinámico

1. Reordenar cadenas

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

2. Convertir formatos 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?

En las expresiones regulares, ciertos caracteres tienen significados especiales como metacaracteres. Para usar estos caracteres de manera literal en operaciones de búsqueda o reemplazo, debes usar secuencias de escape.

Reemplazando Cadenas que Contienen Caracteres Especiales

Ejemplo 1: Reemplazando una Cadena que Contiene un Punto

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

Ejemplo 2: Eliminando un Signo de Dólar

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

Reemplazando Caracteres de Escape HTML

Ejemplo: Escapando 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 de Uso Prácticos y Técnicas Avanzadas

Convirtiendo Saltos de Línea en Etiquetas

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 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. Notas Importantes y Mejores Prácticas

Ten en Cuenta que Solo se Reemplaza la Primera Coincidencia

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

Presta Atención a la Sensibilidad 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."

No Olvides Escapar 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: Explicada la sintaxis y ejemplos simples del método replace().
• Aplicaciones de Expresiones Regulares: Cubierto cómo usar expresiones regulares y banderas para operaciones de reemplazo avanzadas.
• Funciones de Callback: Demostradas técnicas de reemplazo dinámico con ejemplos prácticos.
• Ejemplos Prácticos: Introducidas técnicas útiles como la manipulación de URL y la sanitización de entrada.
• Mejores Prácticas: Explicadas advertencias importantes y consideraciones relacionadas con el rendimiento.

Pensamientos Finales

El método replace() de JavaScript es una herramienta versátil y poderosa que se puede usar de manera efectiva desde escenarios básicos hasta avanzados. Continuaremos proporcionando contenido útil relacionado con JavaScript, así que mantente atento.