JavaScript | Replace multiple strings with multiple other strings - GeeksforGeeks

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() methodThis 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.
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() MethodThis 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 commaReturn 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
arrow_drop_upSave
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:
javascript-string
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Convert a string to an integer in JavaScript
How to calculate the number of days between two dates in javascript?
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
File uploading in React.js
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?