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.

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

Recommended Posts: