Reemplazar las apariciones de una subcadena en una cadena con JavaScript

    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.

     

    Etiquetas:

    Deja una respuesta

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