Cómo reemplazar todas las apariciones de una cadena en JavaScript

En este tutorial, aprenderemos cómo reemplazar todas las ocurrencias de una cadena en JavaScript usando String.replace() método. también miraremos String.split() y Array.join() acercar.

Índice
  1. Usando String.reemplazar
  2. Usando String.split y Array.join

Usando String.reemplazar

Veamos rápidamente la sintaxis:

const newStr = String.replace("pattern", "replacement");

los String.replace() El método devuelve una nueva cadena después de reemplazar las ocurrencias de coincidentes pattern por replacement cadena de caracteres.

El patrón puede ser String o RegEx

Punto importante a tener en cuenta que el pattern tal vez un String o un RegEx.

  • pattern este Stringsolo se reemplaza la primera ocurrencia.
  • pattern este RegExentonces todas las ocurrencias se reemplazan si la bandera global /g es utilizado. También puede habilitar el reemplazo que no distingue entre mayúsculas y minúsculas usando /i bandera.

Veamos el ejemplo,

const lyrics = "Smelly cat, smelly cat what are they feeding you?";

console.log(lyrics.replace("cat", "kitty"));  //pattern is String
console.log(lyrics.replace(/cat/, "kitty"));  //pattern is RegEx

Output

"Smelly kitty, smelly cat what are they feeding you?" "Smelly kitty, smelly cat what are they feeding you?"

Vemos este patrón como String Donde RegEx ambos devolvieron el mismo resultado y solo reemplazaron la primera aparición.

RegEx con bandera global /g

usémoslo RegEx con bandera mundial /g para reemplazar todas las ocurrencias.

const lyrics = "Smelly cat, smelly cat what are they feeding you?";

console.log(lyrics.replace(/cat/g, "kitty"));

Output

"Smelly kitty, smelly kitty what are they feeding you?"
RegEx con bandera insensible a mayúsculas y minúsculas /i

Tenga en cuenta que los reemplazos anteriores son distingue mayúsculas y minúsculasSi probamos esto:

const lyrics = "Smelly cat, smelly cat what are they feeding you?";

console.log(lyrics.replace(/Smelly cat/g, "Sweet kitty"));

Output

"Sweet kitty, smelly cat what are they feeding you?"

Vemos que solo se reemplaza la primera aparición. Podemos habilitar el reemplazo que no distingue entre mayúsculas y minúsculas usando /i bandera en RegEx.

const lyrics = "Smelly cat, smelly cat what are they feeding you?";

console.log(lyrics.replace(/Smelly cat/gi, "Sweet kitty"));

Output

"Sweet kitty, Sweet kitty what are they feeding you?"

¡Hurra! Podemos reemplazar todas las ocurrencias de una cadena usando Regex con indicador global e insensible a mayúsculas y minúsculas /<pattern>/gi

Usando String.split y Array.join

Un enfoque alternativo que es más lento que String.replace() es un enfoque de dos pasos: -

  1. Dividir la cadena usando String.split() para eliminar la aparición del patrón coincidente (sensible a mayúsculas y minúsculas) y devuelve la matriz,
  2. Únete a la matriz usando Array.join() con cuerda de repuesto
const newStr = String.split("pattern").join("replacement");

Veamos el ejemplo.

const lyrics = "Smelly cat, smelly cat what are they feeding you?";

console.log(lyrics.split("cat").join("kitty"));

Output

"Smelly kitty, smelly kitty what are they feeding you?"

Si quieres conocer otros artículos parecidos a Cómo reemplazar todas las apariciones de una cadena en JavaScript puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas