Reemplazar las apariciones de una subcadena en una cadena con JavaScript

R

Introducción

Reemplazar todas o n ocurrencias de una subcadena en una cadena dada es un problema bastante común de manipulación de cadenas y procesamiento de texto en general. JavaScript ofrece algunas formas de hacer esto con bastante facilidad.

En este tutorial, cubriremos algunos ejemplos de cómo reemplazar ocurrencias de una subcadena en una cadena, usando JavaScript.

Trabajaremos con esta oración:

The grey-haired husky has one blue and one brown eye.

Queremos reemplazar la palabra "blue" con "hazel".

reemplazar()

La forma más sencilla de hacer esto es usar el integrado replace() función. Acepta una expresión regular como primer argumento y la palabra o palabras con las que reemplazamos las antiguas como segundo argumento. Alternativamente, también acepta una cadena como primer argumento.

Dado que las cadenas son inmutables en JavaScript, esta operación devuelve una nueva cadena. Entonces, si queremos que los cambios sean permanentes, tendremos que asignar el resultado a una nueva cadena al regresar.

Veamos cómo podemos usar la función:

const regex = /blue/;

let originalStr="The grey-haired husky has one blue and one brown eye.";
let newStr = originalStr.replace(regex, 'hazel');

console.log(originalStr);
console.log(newStr);

Aquí, hemos usado una expresión regular literal en lugar de instanciar una RegExp ejemplo. Esto resulta en:

The grey-haired husky has one blue and one brown eye.
The grey-haired husky has one hazel and one brown eye.

Alternativamente, podríamos haber definido la expresión regular como:

let regex = new RegExp('blue');

El resultado hubiera sido el mismo. La diferencia entre un literal regex y un RegExp object es que los literales se compilan antes de la ejecución, mientras que el objeto se compila en tiempo de ejecución.

El primero es más eficiente si la expresión regular permanece constante, mientras que el segundo se usa normalmente si la expresión regular puede ser dinámica, como una expresión definida por el usuario.

Para realizar un reemplazo que no distingue entre mayúsculas y minúsculas, puede pasar el i bandera a la expresión regular:

const regex = /blue/i;

let originalStr="The grey-haired husky has one Blue and one brown eye.";
let newStr = originalStr.replace(regex, 'hazel');

console.log(originalStr);
console.log(newStr);

Ahora, esto resulta en:

The grey-haired husky has one Blue and one brown eye.
The grey-haired husky has one hazel and one brown eye.

Sin el i bandera, Blue no coincidiría con el /blue/ regex.

Finalmente, puede usar una cadena en lugar de una expresión regular:

let originalStr="The grey-haired husky has one blue and one brown eye.";
let newStr = originalStr.replace('blue', 'hazel');

console.log(originalStr);
console.log(newStr);

Esto también resulta en:

The grey-haired husky has one blue and one brown eye.
The grey-haired husky has one hazel and one brown eye.

Nota: Este enfoque solo funciona para la primera aparición de la cadena de búsqueda. Para reemplazar todas las ocurrencias, puede usar el replaceAll() función.

Si actualizamos la cadena:

let originalStr="The grey-haired husky a blue left eye and a blue right eye.";
let newStr = originalStr.replace('blue', 'hazel');

El resultado sería:

The grey-haired husky has a blue left eye and a blue right eye.
The grey-haired husky has a hazel left eye and a blue right eye.

Observe cómo solo se reemplaza la primera aparición de “azul”, pero no la segunda.

Tenga en cuenta que en realidad podemos reemplazar todas las instancias de una cadena cuando usamos el enfoque de expresiones regulares y .replace(). Para que esto suceda, queremos usar el g bandera de expresiones regulares, que significa “global”. Esto coincide con todas las instancias de una cadena. Por ejemplo:

const regex = /blue/g;

let originalStr="The grey-haired husky a blue left eye and a blue right eye.";
let newStr = originalStr.replace(regex, 'hazel');

console.log(originalStr);
console.log(newStr);
The grey-haired husky has a blue left eye and a blue right eye.
The grey-haired husky has a hazel left eye and a hazel right eye.

reemplaza todo()

A partir de agosto de 2020, según lo definido por la especificación ECMAScript 2021, podemos utilizar el replaceAll() función para reemplazar todas las instancias de una cadena.

Acepta una cadena que estamos buscando y una cadena con la que nos gustaría reemplazarla:

let originalStr="The grey-haired husky has a blue left eye and a blue right eye.";
let newStr = originalStr.replaceAll('blue', 'hazel');

console.log(originalStr);
console.log(newStr);

Esto resulta en:

The grey-haired husky has a blue left eye and a blue right eye.
The grey-haired husky has a hazel left eye and a hazel right eye.

Ahora se han reemplazado todas las instancias de la palabra de búsqueda.

dividir () y unirse ()

Si replaceAll() no es compatible con su tiempo de ejecución de JavaScript, puede usar el viejo y confiable split() y join() Acercarse:

let originalStr="The grey-haired husky has a blue left eye and a blue right eye.";
let newStr = originalStr.split('blue').join('hazel');

console.log(originalStr);
console.log(newStr);

los split() la función divide la cadena en una matriz de subcadenas en la cadena dada – 'blue'. Al dividir, tenemos una matriz de:

["The grey-haired husky has a ", " left eye and a ", " right eye."]

Entonces, cuando se usa join() con una cadena, la volvemos a unir a la oración original, con la cadena pasada a la función insertada en los saltos.

Ahora, nos quedamos con todas las apariciones de la cadena original reemplazada por una nueva:

The grey-haired husky has a blue left eye and a blue right eye.
The grey-haired husky has a hazel left eye and a hazel right eye.

Nota: Si bien este enfoque funciona, no se recomienda su uso si está disponible uno de los otros métodos explicados anteriormente. La razón de esto es que el propósito detrás de este enfoque no es tan obvio a primera vista y, por lo tanto, hace que el código sea menos legible.

Conclusión

En este artículo, hemos repasado algunos ejemplos de cómo se pueden reemplazar las apariciones de una subcadena en una cadena, usando JavaScript.

 

About the author

Ramiro de la Vega

Bienvenido a Pharos.sh

Soy Ramiro de la Vega, Estadounidense con raíces Españolas. Empecé a programar hace casi 20 años cuando era muy jovencito.

Espero que en mi web encuentres la inspiración y ayuda que necesitas para adentrarte en el fantástico mundo de la programación y conseguir tus objetivos por difíciles que sean.

Add comment

Sobre mi

Últimos Post

Etiquetas

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, aceptas el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad