JavaScript | Replace multiple strings with multiple other strings

Last Updated : 06 Jun, 2019

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:
Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!
```
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.

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

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.

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

Output:

Before clicking the button:
After clicking the button:

My Personal Notes

Related Articles

Table of Contents

JavaScript | Replace multiple strings with multiple other strings

Start Your Coding Journey Now!