9. str.replace() y replaceAll(): Sustituciones con Tokens y Callbacks
Reemplazos con tokens ($1, $&, $<nombre>), funciones de reemplazo dinámicas y diferencias entre replace y replaceAll.
Sustitución Avanzada de Texto en JavaScript
El método str.replace(regex, reemplazo) es una de las herramientas más potentes del lenguaje. Puede recibir como segundo parámetro tanto una cadena de reemplazo con tokens especiales como una función de callback (replacer).
| Token Especial | Significado en la Cadena de Reemplazo |
|---|---|
$1 , $2 ... $99 |
Inserta el texto del grupo de captura posicional correspondiente |
$& |
Inserta la coincidencia completa encontrada |
$<nombre> |
Inserta el valor del grupo de captura con nombre (ES2018+) |
$` (Backtick) |
Inserta la porción de texto que precede a la coincidencia |
$' (Comilla simple) |
Inserta la porción de texto que sucede a la coincidencia |
$$ |
Inserta un signo de dólar literal ($) |
Reemplazo Dinámico con Función Callback (Replacer)
Cuando la lógica de sustitución requiere cálculos o lógica condicional, pasamos una función callback con la siguiente firma:
str.replace(regex, (match, p1, p2, offset, string, groups) => {
return nuevoValorCalculado;
});⚡ Transformación de Formatos con Tokens y Enmascaramiento Dinámico
Convierte formatos de fecha ISO a formato latino con $<nombre>, enmascara números confidenciales y transforma nombres de variables camelCase a kebab-case.
// 1. Reordenamiento con Tokens de Grupos Nombrados ($<nombre>)
const fechaIso = "Evento programado para 2026-11-09 en el auditorio.";
const regexFecha = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/g;
// Invertimos a formato DD/MM/AAAA usando los nombres de los grupos
const fechaLatina = fechaIso.replace(regexFecha, "$<day>/$<month>/$<year>");
console.log("--- 1. Reordenamiento con $<nombre> ---");
console.log(fechaLatina);
// 2. Enmascaramiento de Tarjetas de Crédito usando Callback
const textoPago = "Cobro procesado en tarjeta 4532-8901-2345-6789 autorizada.";
const regexTarjeta = /(\d{4})-(\d{4})-(\d{4})-(\d{4})/g;
const textoEnmascarado = textoPago.replace(regexTarjeta, (match, p1, p2, p3, p4) => {
return `****-****-****-${p4}`;
});
console.log("\n--- 2. Enmascaramiento con Callback ---");
console.log(textoEnmascarado);
// 3. Conversión de camelCase a kebab-case
const propiedadesJs = ["nombreUsuario", "fechaDeNacimiento", "totalPuntosAcumulados"];
console.log("\n--- 3. Conversión camelCase a kebab-case ---");
propiedadesJs.forEach(prop => {
// Localiza cada letra mayúscula y le antepone un guion en minúscula
const kebab = prop.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
console.log(`${prop.padEnd(25)} => ${kebab}`);
});Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lecciónEn una cadena de reemplazo de str.replace(), ¿qué representa el token especial $&?
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.🚀 ¿Quieres dominar Regex en JavaScript: Expresiones Regulares & RegExp y crear proyectos reales?
Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.
🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.