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. -
Before clicking the button:
-
After clicking the button:
-
Before clicking the button:
-
After clicking the button:
- Round off a number to the next multiple of 5 using JavaScript
- JavaScript | Return multiple values from function
- Create a string with multiple spaces in JavaScript
- JavaScript | Split a string with multiple separators
- How to remove multiple elements from array in JavaScript ?
- Call multiple JavaScript functions in onclick event
- JavaScript | Strings
- How to sort strings in JavaScript?
- Optimum way to compare strings in JavaScript
- How to create multi-line strings in JavaScript?
- Compare the Case Insensitive strings in JavaScript
- CSS | Multiple Columns
- Multiple Inheritance in PHP
- JQuery | Multiple ID selectors
- How to search by multiple key => value in PHP array ?
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:
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:
Recommended Posts:
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.