JavaScript | Reemplace varias strings con varias otras strings

Dada una oración que tiene múltiples strings. La tarea es reemplazar varias strings con nuevas strings simultáneamente en lugar de hacerlo una por una, usando javascript.
A continuación se presentan los pocos métodos para entender:

Método replace()
Este método busca en una string un valor definido, o una expresión regular, y devuelve una nueva string con el valor definido reemplazado.
Sintaxis:
```
string.replace(searchVal, newvalue)
```
Parámetros:
- searchVal: este parámetro es obligatorio. Especifica el valor, o expresión regular, que se va a reemplazar por el nuevo valor.
- valor nuevo: este parámetro es obligatorio. Especifica el valor con el que reemplazar el valor de búsqueda.
Valor devuelto:
Devuelve una nueva string donde los valores definidos han sido reemplazados por el nuevo valor.
Método JavaScript Array join()
Este método agrega los elementos de una array en una string y devuelve la string.
Los elementos estarán separados por un separador pasado. El separador predeterminado es la coma (, ).
Sintaxis:
```
array.join(separator)
```
Parámetros:
- separador: este parámetro es opcional. Especifica el separador a utilizar. Si no se utiliza, los elementos se separan con una coma.
Valor de retorno:
Devuelve una string, que denota los valores de la array, separados por el separador definido.

Ejemplo 1: este ejemplo usa RegExp para reemplazar las strings según el objeto usando el método replace() .

<!DOCTYPE html>  
<html>
  
<head>
    <title>
        JavaScript | Replace multiple strings with multiple other strings.
    </title>
</head>
  
<body style="text-align:center;" id="body">
    <h1 style="color:green;">GeeksForGeeks</h1>
    <p id="GFG_UP" style="font-size: 19px; font-weight: bold;">
    </p>
    <button onClick="GFG_Fun()">
        click here
    </button>
    <p id="GFG_DOWN" style="color: green; font-size: 24px; font-weight: bold;">
    </p>
    <script>
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        var str = "I have a Lenovo Laptop, a Honor Phone, and a Samsung Tab.";
        var Obj = {
            Lenovo: "Dell",
            Honor: "OnePlus",
            Samsung: "Lenovo"
        };
        up.innerHTML = str;
  
        function GFG_Fun() {
            down.innerHTML = str.replace(/Lenovo|Honor|Samsung/gi, function(matched){
                return Obj[matched];
            });
        }
    </script>
</body>
  
</html>

Producción:

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

Ejemplo 2: este ejemplo primero crea un RegExp y luego usa el método replace() para reemplazar las palabras clave particulares con la nueva.

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JavaScript | Replace multiple strings with multiple other strings.
    </title>
</head>
  
<body style="text-align:center;" id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP" style="font-size: 19px; font-weight: bold;">
    </p>
    <button onClick="GFG_Fun()">
        click here
    </button>
    <p id="GFG_DOWN" style="color: green; font-size: 24px; font-weight: bold;">
    </p>
    <script>
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        var str = "I have a Lenovo Laptop, a Honor Phone, and a Samsung Tab.";
        var Obj = {
            Lenovo: "Dell",
            Honor: "OnePlus",
            Samsung: "Lenovo"
        };
        up.innerHTML = str;
  
        function GFG_Fun() {
            var RE = new RegExp(Object.keys(Obj).join("|"), "gi");
            down.innerHTML = str.replace(RE, function(matched) {
                return Obj[matched];
            });
        }
    </script>
</body>
  
</html>

Producción:

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta