JavaScript | Replace multiple strings with multiple other strings

Given a Sentence having multiple strings. The task is to replace multiple strings with new strings simultaneously instead of doing it one by one, using javascript.
Below are the few methods to understand:

  • replace() method
    This method searches a string for a defined value, or a regular expression, and returns a new string with the replaced defined value.
    Syntax:

    string.replace(searchVal, newvalue)
    

    Parameters:



    • searchVal: This parameter is required. It specifies the value, or regular expression, that is going to replace by the new value.
    • newvalue: This parameter is required. It specifies the value to replace the search value with.

    Return value:
    Returns a new string where the defines value(s) has been replaced by the new value.

  • JavaScript Array join() Method
    This method adds the elements of an array into a string, and returns the string.
    The elements will be separated by a passed separator. The default separator is comma (, ).
    Syntax:

    array.join(separator)
    

    Parameters:

    • separator: This parameter is optional. It specifies the separator to be used. If not used, the elements are separated with a comma

    Return value:
    It returns a string, denoting the array values, separated by the defined separator.

    • Example 1: This example uses the RegExp to replace the strings according to the object using the replace() method.

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!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>

      chevron_right

      
      

      Output:

      • Before clicking the button:
      • After clicking the button:

      Example 2: This example first creates a RegExp and then using the replace() method to replace the particular keywords with the new one.

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!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>

      chevron_right

      
      

      Output:

      • Before clicking the button:
      • After clicking the button:


      My Personal Notes arrow_drop_up

      Check out this Author's contributed articles.

      If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

      Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.