replaceAll

El método replaceAll devuelve un string creado a partir de otro, reemplazando todas las coincidencias especificadas en un patrón.

const balls = "⚽️ 🏀 🥎 🏀 🏐 🎾 🎱 🏀";

// replace solo cambia la primera coincidencia
const newBalls = balls.replace("🏀", "🏈");

// replaceAll cambia todas las coincidencias
const newBalls2 = balls.replaceAll("🏀", "🏈");

console.log(newBalls);
// "⚽️ 🏈 🥎 🏀 🏐 🎾 🎱 🏀"

console.log(newBalls2);
// "⚽️ 🏈 🥎 🏈 🏐 🎾 🎱 🏈"

El patrón puede ser un string o una RegExp y el reemplazo puede ser un string o una función que va a ser llamada por cada coincidencia.

Hay que tomar en cuenta que dicho método no cambia el string original, sino que devuelve uno nuevo.

Sintaxis

const nuevoString = string.replaceAll([primer parámetro], [segundo parámetro]);

Primer parámetro:

String

Un string para encontrar todas las coincidencias a reemplazar.

const animales = "🐶 Perro 🐱 Gato 🐼 Panda 🐻 Oso 🐱 Gato";

// "🐱 Gato" sería el string a reemplazar.
const nuevosAnimales = animales.replaceAll("🐱 Gato", "🦁 León");

console.log(nuevosAnimales); // "🐶 Perro 🦁 León 🐼 Panda 🐻 Oso 🦁 León";

RegExp

Una expresión regular que se puede utilizar como patrón para encontrar todas las coincidencias a reemplazar.

const string = "[email protected]";

const nuevoString = string.replaceAll(/(?<=@)[^.]+(?=\.)/g, "gmail");

console.log(nuevoString); // [email protected]

Segundo parámetro:

String

Un string que reemplazara todas las coincidencias encontradas del primer parámetro.

const animales = "🐶 Perro 🐱 Gato 🐼 Panda 🐻 Oso 🐱 Gato";

// "🦁 León" sería el nuevo valor.
const nuevosAnimales = animales.replaceAll("🐱 Gato", "🦁 León");

console.log(nuevosAnimales); // "🐶 Perro 🦁 León 🐼 Panda 🐻 Oso 🦁 León";

function

Una función que va a ser llamada para crear un nuevo string, remplazando las coincidencias encontradas del primer parámetro y ejecutándose por cada coincidencia.

const string = "Hola, mi nombre es Fili. Tengo 24 años.";

const nuevoString = string.replaceAll("i", function(match){
	return `🔥${match}🔥`;
});

console.log(nuevoString);

// Hola, m🔥i🔥 nombre es F🔥i🔥l🔥i🔥. Tengo 24 años.

Los argumentos que puede recibir la función son los siguientes:

, function(match, p1, p2, ..., offset, string) { ... }

• match: Representa el string coincidente.
• p1, p2: Representa parte del string encontrado, conforme al grupo de captura (paréntesis) en una RegExp.
• offset: El desplazamiento del string coincidente dentro del string a reemplazar.
• string: Todo el string a examinar.

const string = "abcde";

const nuevoString = string.replaceAll("de", function(match, offset, string){
	return ` match: ${match}, offset: ${offset}, string: ${string}`;
});

console.log(nuevoString);

// abc match: de, offset: 3, string: abcde

Como puedes ver en el ejemplo: match representa lo que estamos buscando, offset representa cuanto se tuvo que desplazar para encontrar la coincidencia y string representa la cadena a buscar.

Para el caso de las RegExp se obtienen parámetros adicionales:

const string = "abcde";

const nuevoString = string.replaceAll(/(d+)(e+)/g, function(match, p1, p2, offset, string){
	return ` match: ${match}, p1: ${p1}, p2: ${p2}, offset: ${offset}, string: ${string}`;
});

console.log(nuevoString);

// abc match: de, p1: d, p2: e, offset: 3, string: abcde

p1, p2, ... Forman parte de los parámetros cuando hay grupos de captura en las expresiones regulares. En este caso (d+) y (e+). Hay que tener en cuenta que entre más grupos, mayor serán los parámetros que recibe la función.

Patrones de reemplazo especiales:

Otra forma de acceder a datos especiales del método es mediante los patrones de reemplazo especiales.

$$: Representa un $.

$&: Representa el string coincidente.

$`: Representa parte de la cadena antes del string coincidente.

$': Representa parte de la cadena después del string coincidente.

$n: Representa parte del string encontrado, conforme al grupo de captura (paréntesis) en una RegExp. En donde n es el número del grupo.

const string = "abcdefg";

const nuevoString = string.replaceAll("de", " match: $&, antes: $`, después: $'. ");

console.log(nuevoString);

// abc match: de, antes: abc, después: fg. fg

Al igual que con la función, al usar RegExp, se pueden acceder a los grupos de captura ($n).

const string = "abcdefg";

const nuevoString = string.replaceAll(/(d+)(e+)/g, " match: $&, antes: $`, después: $', grupo1: $1, grupo2: $2. ");

console.log(nuevoString);

// abc match: de, antes: abc, después: fg, grupo1: d, grupo2: e. fg

Recursos

• String.prototype.replaceAll()