Cómo reemplazar un subcadena de una cadena de texto en JavaScript

Resumen: en este tutorial, aprenderás a reemplazar todas las apariciones de una subcadena en una cadena con JavaScript.

Introducción a los métodos replace y replaceAll de JavaScript

El tipo String proporciona los métodos replace() y replaceAll() que permiten reemplazar todas las apariciones de una subcadena en una cadena y devolver la nueva versión de la cadena.

Ten en cuenta que ambos métodos no cambian la cadena original, pero devuelven la nueva cadena con las subcadenas reemplazadas por una nueva subcadena.

1) Usando el método replace()

El siguiente ejemplo usa el método replace() para reemplazar la cadena 'JS' por 'JavaScript' en una variable de mensaje:

const message = 'JS will, JS will, JS will rock you!';
const result = message.replace('JS','JavaScript');
console.log(result);

Resultado:

JavaScript will, JS will, JS will rock you!

Como puedes ver claramente en el resultado, el método replace() solo reemplaza la primera aparición de JS en la cadena.

Para reemplazar todas las apariciones de la cadena 'JS', convierte la cadena buscada en una expresión regular y usa la bandera global (g) así:

const message = 'JS will, JS will, JS will rock you!';
const result = message.replace(/JS/g,'JavaScript');
console.log(result);

Resultado:

"JavaScript will, JavaScript will, JavaScript will rock you!"

Si deseas reemplazar todas las apariciones de una subcadena e ignorar las mayúsculas y minúsculas, debes agregar el indicador i a la expresión regular:

const message = 'JS will, js will, Js will rock you!';
const result = message.replace(/JS/gi,'JavaScript');

Resultado:

"JavaScript will, JavaScript will, JavaScript will rock you!"

2) Usando el método replaceAll()

El método replaceAll() reemplaza todas las apariciones de una subcadena en una cadena y devuelve la nueva cadena. Por ejemplo:

const message = 'JS will, JS will, JS will rock you!';
const result = message.replaceAll('JS','JavaScript');

console.log(result);

Resultado:

"JavaScript will, JavaScript will, JavaScript will rock you!"

Si deseas reemplazar todas las apariciones de una subcadena en una cadena, independientemente de las mayúsculas y minúsculas, usa una expresión regular con las banderas gi:

const message = 'JS will, Js will, js will rock you!';
const result = message.replaceAll(/JS/gi,'JavaScript');

console.log(result);

Resultado:

"JavaScript will, JavaScript will, JavaScript will rock you!"

Ten en cuenta que el método replaceAll() no es compatible con todos los navegadores. Por lo tanto, debes verificar la compatibilidad del navegador antes de usarlo.

Resumen

Para reemplazar todas las apariciones de una subcadena en una cadena, puedes usar el método replace() o replaceAll():

• replace() convierta la subcadena en una expresión regular y use la bandera g.
• El método replaceAll() es más sencillo.

Para ignorar las mayúsculas y minúsculas, puedes utilizar la bandera i en la expresión regular.