Reemplazar ocurrencias de una subcadena en una cadena con JavaScript

En este tutorial, repasaremos ejemplos de cómo reemplazar todas o una sola ocurrencia de una subcadena en una cadena usando JavaScript. Usaremos las funciones replace(), replaceAll(), split() y join().

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.

Estaremos trabajando con esta oración:

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

Querremos reemplazar la palabra "azul" con "avellana".

reemplazar()

La forma más sencilla de hacer esto es usar la función reemplazar() incorporada. Acepta una expresión regular como primer argumento, y la(s) palabra(s) con las que estamos reemplazando 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:

1
2
3
4
5
6
7
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 un literal de expresión regular en lugar de instanciar una instancia RegExp. Esto resulta en:

1
2
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:

1
let regex = new RegExp('blue');

El resultado hubiera sido el mismo. La diferencia entre un literal regex y un objeto RegExp 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 se mantiene constante, mientras que el último 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 distinga entre mayúsculas y minúsculas, puede pasar el indicador i a la expresión regular:

1
2
3
4
5
6
7
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:

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

Sin la bandera i, Blue no coincidiría con la expresión regular /blue/.

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

1
2
3
4
5
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:

1
2
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 funciona solo para la primera aparición de la cadena de búsqueda. Para reemplazar todas las ocurrencias, puede usar la función replaceAll().

Si actualizamos la cadena:

1
2
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:

1
2
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 "blue", 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, querremos usar el indicador de expresión regular g, que significa "global". Esto coincide con todas las instancias en una cadena. Por ejemplo:

1
2
3
4
5
6
7
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);
1
2
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 define la especificación ECMAScript 2021, podemos usar la función replaceAll() para reemplazar todas las instancias de una cadena.

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

1
2
3
4
5
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:

1
2
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 todas las instancias de la palabra de búsqueda han sido reemplazadas.

dividir() y unir() {#dividir y unir}

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

1
2
3
4
5
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);

La función split() divide la cadena en una matriz de subcadenas en la cadena dada - 'azul'. Al dividir, tenemos una matriz de:

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

Luego, cuando usamos join() con una cadena, la unimos nuevamente a la oración original, con la cadena pasada a la función insertada en los descansos.

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

1
2
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 uno de los otros métodos explicados anteriormente está disponible para su uso. 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 puede reemplazar las apariciones de una subcadena en una cadena, utilizando JavaScript.