JavaScript replace y replaceAll: cómo reemplazar texto en una cadena
JavaScript permite buscar y sustituir texto dentro de una cadena mediante los métodos replace() y replaceAll().
Podemos utilizarlos para normalizar textos, modificar valores, transformar información o sustituir patrones antes de mostrar o procesar los datos.
Reemplazar texto con replace()
El método replace() busca una coincidencia y devuelve una nueva cadena con el valor sustituido.
const texto = 'Hola Marta';
const resultado = texto.replace('Marta', 'Laura');
console.log(resultado);
Resultado:
Hola Laura
La cadena original no se modifica:
console.log(texto);
// Hola Marta
Las cadenas de JavaScript son inmutables, por lo que replace() devuelve un nuevo valor.
Si queremos conservar el resultado:
let mensaje = 'Hola Marta';
mensaje = mensaje.replace('Marta', 'Laura');
replace() solo sustituye la primera coincidencia
Cuando utilizamos una cadena como patrón, replace() modifica únicamente la primera coincidencia.
const texto = 'PHP, JavaScript y JavaScript';
const resultado = texto.replace(
'JavaScript',
'TypeScript'
);
console.log(resultado);
Resultado:
PHP, TypeScript y JavaScript
Si necesitamos sustituir todas las apariciones, podemos utilizar replaceAll().
Reemplazar todas las coincidencias con replaceAll()
const texto = 'PHP, JavaScript y JavaScript';
const resultado = texto.replaceAll(
'JavaScript',
'TypeScript'
);
console.log(resultado);
Resultado:
PHP, TypeScript y TypeScript
Para sustituciones literales sencillas, replaceAll() es normalmente la opción más clara cuando necesitamos modificar todas las coincidencias.
Por ejemplo:
const texto = 'azul, rojo, azul';
const resultado = texto.replaceAll(
'azul',
'verde'
);
Obtendremos:
verde, rojo, verde
Reemplazar utilizando expresiones regulares
replace() también admite expresiones regulares.
Por ejemplo:
const texto = 'JavaScript javascript JAVASCRIPT';
const resultado = texto.replace(
/javascript/gi,
'JS'
);
console.log(resultado);
Resultado:
JS JS JS
Aquí utilizamos g para buscar todas las coincidencias e i para ignorar las diferencias entre mayúsculas y minúsculas.
Las expresiones regulares son especialmente útiles cuando no buscamos una cadena exacta, sino un patrón.
Por ejemplo, podemos convertir varios espacios consecutivos en uno:
const texto = 'Hola mundo';
const resultado = texto.replace(/\s+/g, ' ');
console.log(resultado);
Resultado:
Hola mundo
También podemos eliminar todos los caracteres que no sean números:
const telefono = '+34 600-123-456';
const numeros = telefono.replace(/\D/g, '');
console.log(numeros);
Resultado:
34600123456
replaceAll() y expresiones regulares
replaceAll() también admite expresiones regulares:
const texto = 'JavaScript javascript';
const resultado = texto.replaceAll(
/javascript/gi,
'JS'
);
Cuando pasamos una expresión regular a replaceAll(), esta debe utilizar el modificador global g.
Por ejemplo:
texto.replaceAll(/javascript/g, 'JS');
es válido.
En cambio:
texto.replaceAll(/javascript/, 'JS');
provocará un error porque la expresión regular no es global.
Para un texto literal conocido no necesitamos complicar el código con una expresión regular:
texto.replaceAll('Barcelona', 'Madrid');
suele ser más claro que crear una expresión regular equivalente.
Cuidado con expresiones regulares creadas dinámicamente
Supongamos que el texto que queremos buscar procede de una variable:
const buscar = 'producto.*';
Si hacemos:
const regex = new RegExp(buscar, 'g');
los caracteres .* tendrán un significado especial dentro de la expresión regular.
Si nuestra intención es buscar exactamente el contenido de la variable, puede resultar más sencillo utilizar:
texto.replaceAll(buscar, reemplazo);
Así el valor se interpreta como una cadena literal.
Esto evita problemas cuando el texto contiene puntos, paréntesis, corchetes u otros caracteres que tienen un significado especial en las expresiones regulares.
Utilizar una función como reemplazo
El segundo argumento de replace() también puede ser una función.
Esto permite calcular el valor que sustituirá cada coincidencia.
const texto = 'Productos: 10, 20 y 30';
const resultado = texto.replace(
/\d+/g,
numero => Number(numero) * 2
);
console.log(resultado);
Resultado:
Productos: 20, 40 y 60
La función recibe cada coincidencia y devuelve el contenido que debe utilizarse como sustitución.
Esta técnica es útil cuando las coincidencias no deben reemplazarse siempre por el mismo texto.
Reutilizar partes del texto con grupos de captura
Las expresiones regulares también pueden capturar partes del contenido y reutilizarlas durante el reemplazo.
Supongamos que tenemos:
Pérez, Marta
y queremos obtener:
Marta Pérez
Podemos escribir:
const nombre = 'Pérez, Marta';
const resultado = nombre.replace(
/(\w+),\s*(\w+)/,
'$2 $1'
);
console.log(resultado);
Los valores $1 y $2 hacen referencia a los grupos capturados por la expresión regular.
Esto permite utilizar replace() para realizar transformaciones más complejas que una sustitución literal.
Reemplazar texto no es lo mismo que modificar el DOM
Si lo que queremos cambiar es el contenido o un atributo de un elemento HTML, no siempre necesitamos utilizar replace().
Por ejemplo, para cambiar la URL de una imagen:
const imagen = document.querySelector('#producto');
imagen.src = 'https://www.ejemplo.com/img/producto.jpg';
es preferible modificar directamente el atributo antes que obtener una gran cantidad de HTML como texto, aplicar reemplazos y volver a insertarlo.
replace() y replaceAll() están pensados para trabajar con cadenas. Cuando podemos actuar directamente sobre el DOM, normalmente es mejor utilizar sus APIs.
replace() o replaceAll(): cuál utilizar
La elección puede resumirse fácilmente.
Para sustituir únicamente la primera coincidencia:
replace()
Para sustituir todas las coincidencias literales:
replaceAll()
Cuando necesitamos buscar patrones, ignorar diferencias entre mayúsculas y minúsculas o realizar transformaciones más complejas, podemos utilizar expresiones regulares.
Y si el reemplazo depende del contenido encontrado, podemos proporcionar una función en lugar de un texto fijo.
Reemplazar texto en JavaScript
JavaScript dispone de todo lo necesario para realizar búsquedas y sustituciones dentro de cadenas.
replace() permite sustituir una coincidencia y trabajar con expresiones regulares, mientras que replaceAll() simplifica los casos en los que queremos modificar todas las apariciones de un texto.
Ambos métodos devuelven una nueva cadena y no modifican directamente el valor original.
La elección entre uno y otro depende principalmente de si necesitamos sustituir una sola coincidencia, todas las apariciones de una cadena o un patrón más complejo.
En ENDEOS desarrollamos y mantenemos soluciones web para empresas, incluyendo modernización de código, mantenimiento y evolución de aplicaciones web existentes.
Artículos relacionados:
- classic-editor-remember:
- block-editor