How to replace all occurrences of a string in JavaScript ?
Replacing all occurrences of a string in JavaScript is a common task in text processing. It involves identifying and substituting specific substrings within a larger string. This capability is crucial for tasks such as data cleaning, formatting, and transforming text in various applications.
These are the following methods to replace all occurrences of a string in JavaScript:
Table of Content
- Using string.replace() method
- Using String split() and join() Method
- Using replaceAll() Method
- Using regular expression
- Using reduce() Function
Method 1: Using string.replace() method
The string.replace() method is used to replace a part of the given string with another string or a regular expression. The original string will remain unchanged.
Example: In this example we replaces all occurrences of ‘Welcome’ with ‘Hello’ in the string str, using a case-insensitive global regex
// Origin String
const str = 'Welcome w3wiki, Welcome Beginner';
// Replace all occurrence of Welcome with Hello
const newString = str.replace(/Welcome/gi, 'Hello');
// Display the result
console.log(newString);
Output
Hello w3wiki, Hello Beginner
Method 2: Using String split() and join() Method
We can split the strings of text with the JavaScript split method and join strings using the replace characters with the join method.
Example: In this example we replaces all occurrences of ‘Welcome’ with ‘Hello’ in the string str by splitting and joining.
// Original String
const str = 'Welcome w3wiki, Welcome Beginner';
// Replace all occurrence of Welcome with Hello
const newString = str.split('Welcome').join('Hello');
// Display the result
console.log(newString);
Output
Hello w3wiki, Hello Beginner
Method 3: Using replaceAll() Method
The replaceAll() method is used to replace all the matches of a string with a specified string or a regular expression. The original string is left unchanged after this operation.
Example: In this example we replaces all occurrences of ‘Welcome’ with ‘Hello’ in the string str using the replaceAll() method, then logs the result.
// Original String
const str = 'Welcome w3wiki, Welcome Beginner';
// Replace all occurrences of Welcome with Hello
const newString = str.replaceAll("Welcome", "Hello");
// Display the result
console.log(newString);
Output
Hello w3wiki, Hello Beginner
Method 4: Using regular expression
To replace all occurrences of a string in JavaScript using a regular expression, we can use the regular expression with the global (g) Flag.
Example: In this example we use replaces all occurrences of the searchString ‘Welcome’ with ‘Hello’ in the str string using a regular expression, then logs the replaced string.
const str = 'Welcome w3wiki, Welcome Beginner';
const searchString ="Welcome";
const replacementString ="Hello";
let regex = new RegExp(searchString, 'g');
let replacedString = str.replace(regex, replacementString);
console.log(replacedString);
Output
Hello w3wiki, Hello Beginner
Method 5: Using reduce() Function
In this approach, we split the string into an array of substrings using the split() method, and then we use the reduce() function to concatenate the substrings, inserting the replacement string where the original substring occurs. This method gives us fine control over the replacement process and can be useful for more complex string manipulations.
Example: In this example we splits the str string by the searchString ‘Welcome’, then joins the parts with ‘Hello’ in between, effectively replacing all occurrences, and logs the result.
// Original String
const str = 'Welcome w3wiki, Welcome Beginner';
const searchString = "Welcome";
const replacementString = "Hello";
// Replace all occurrences of Welcome with Hello
const newString = str.split(searchString).reduce((acc, current, index, array) => {
return acc + current + (index < array.length - 1 ? replacementString : '');
}, '');
// Display the result
console.log(newString);
Output
Hello w3wiki, Hello Beginner