Métodos de Reemplazo en Strings de JavaScript

Reemplazar texto es una de las operaciones más comunes y potentes en la manipulación de strings. Ya sea para corregir un error, censurar una palabra o estandarizar datos, JavaScript nos proporciona dos herramientas clave que son los métodos de reemplazo: replace() y replaceAll().

Aunque parecen similares, tienen diferencias fundamentales en su comportamiento. Comprender cuándo usar cada uno te permitirá escribir código más limpio, predecible y eficiente. En esta guía, exploraremos a fondo ambos métodos, sus diferencias y sus casos de uso prácticos.

Reemplazar la Primera Ocurrencia con replace()

El método replace() es la herramienta clásica para sustituir texto. Busca la primera coincidencia de un patrón y la reemplaza por un nuevo valor, devolviendo un nuevo string con el cambio (recuerda que los strings son inmutables, el original no se modifica).

string.replace(patron, reemplazo)

• patron: Puede ser un string o una Expresión Regular (RegEx).
• reemplazo: El string que sustituirá la coincidencia. También puede ser una función para reemplazos dinámicos.

El método No modifica la cadena original y este retorna una nueva cadena con los reemplazos aplicados. Solo reemplaza la primera coincidencia si el pattern es una cadena o una expresión regular sin el modificador global (g). Puede reemplazar usando un texto estático o el resultado de una función.

Reemplazo simple con cadenas

const message = "JavaScript es un lenguaje poderoso. ¡Amo JavaScript!";

// Solo se reemplaza la primera "JavaScript".
const newMessage = message.replace("JavaScript", "Python");

console.log(newMessage);
// "Python es un lenguaje poderoso. ¡Amo JavaScript!"

Solo la primera aparición de "JavaScript" es reemplazada por "Python". Las coincidencias posteriores no se ven afectadas.

Uso con Expresiones Regulares

Aquí es donde replace() gana una flexibilidad inmensa. Puedes usar expresiones regulares para definir patrones de búsqueda complejos.

Ejemplo: Ignorar mayúsculas/minúsculas
Usando la bandera i (ignore case), puedes reemplazar un texto sin importar si está en mayúsculas o minúsculas.

const text = "Aprender es divertido. ¡vamos a aprender más!";
const updatedText = text.replace(/aprender/i, "Estudiar");

console.log(updatedText);
// "Estudiar es divertido. ¡vamos a aprender más!"
// Nota: Solo la primera "Aprender" (con mayúscula) fue reemplazada.

Para reemplazar todas las ocurrencias con replace(), necesitas usar una expresión regular con la bandera global g.

const comment = "Este producto es caro y el envío es caro.";
const updatedComment = comment.replace(/caro/g, "costoso");

console.log(updatedComment);
// "Este producto es costoso y el envío es costoso."

Ventajas del método replace()

1. Flexibilidad: Soporta reemplazos estáticos y dinámicos.
2. Compatibilidad con expresiones regulares: Lo hace poderoso para búsquedas y modificaciones avanzadas.
3. Manejo dinámico: Usar funciones como reemplazo permite una lógica compleja.

Este era el método estándar para reemplazar todo antes de la llegada de replaceAll().

Reemplazar Todas las Ocurrencias con replaceAll()

Introducido en ES2021, replaceAll() fue diseñado para simplificar un caso de uso muy común: reemplazar todas las apariciones de una subcadena sin necesidad de usar expresiones regulares.

string.replaceAll(patron, reemplazo)

• patron: Puede ser un string o una Expresión Regular global (debe tener la bandera g).
• reemplazo: El string que sustituirá todas las coincidencias.

Este método reemplaza todas las coincidencias de forma directa (no solo la primera como replace()). Permite el uso de cadenas o expresiones regulares globales como patrón y No modifica la cadena original, sino que devuelve una nueva con los reemplazos aplicados.

Reemplazo simple con cadenas

La gran ventaja de replaceAll() es que puedes usar un simple string como patrón para reemplazar todas las ocurrencias, haciendo el código más legible y directo.

const originalText = "Hola mundo, qué hermoso mundo.";

const newText = originalText.replaceAll("mundo", "universo");

console.log(newText);
// "Hola universo, qué hermoso universo."

Reemplazo con expresiones regulares globales: Aunque replaceAll no requiere el modificador g, puedes usarlo con expresiones regulares.

const text = "123-456-789";
const newText = text.replaceAll(/\d/g, "*");

console.log(newText); // "***-***-***"

Caso de Uso: Limpiar texto de caracteres no deseados:

const texto = "123-456-7890";
const limpio = texto.replaceAll("-", "");

console.log(limpio); // "1234567890"

Esto es útil en escenarios donde necesitas estandarizar números o datos formateados.

¿Cuándo Usar Cada Uno? Guía de Decisión

1. Usa replace() cuando:
   • Necesitas reemplazar solo la primera aparición de un texto.
   • Necesitas realizar reemplazos complejos basados en expresiones regulares sin la bandera global.
   • Tu código debe ser compatible con entornos de JavaScript antiguos.
2. Usa replaceAll() cuando:
   • Necesitas reemplazar todas las apariciones de un string de forma simple y directa.
   • La legibilidad del código es una prioridad para reemplazos múltiples.
   • Estás trabajando en un entorno moderno que soporta ES2021.

const phoneNumber = "(123) 456-7890";

// Eliminamos paréntesis, espacios y guiones para obtener solo los dígitos.
let cleanedNumber = phoneNumber.replaceAll("(", "");
cleanedNumber = cleanedNumber.replaceAll(")", "");
cleanedNumber = cleanedNumber.replaceAll(" ", "");
cleanedNumber = cleanedNumber.replaceAll("-", "");

console.log(cleanedNumber); // "1234567890"

// Una forma más avanzada sería usar una expresión regular:
const regexClean = phoneNumber.replace(/[()\s-]/g, "");
console.log(regexClean); // "1234567890"

Conclusión

Tanto replace() como replaceAll() son herramientas imprescindibles para la manipulación de texto en JavaScript. Mientras que replace() ofrece una flexibilidad increíble gracias a su compatibilidad total con expresiones regulares, replaceAll() simplifica enormemente la tarea común de sustituir todas las ocurrencias de una subcadena. Elegir la herramienta adecuada para el trabajo te permitirá escribir código más limpio, eficiente y fácil de mantener.