How to Replace All Occurrences of a String in JavaScript

JavaScript is a versatile programming language that can manipulate strings with ease. One common operation you might need to perform is replacing all occurrences of a specific substring within a larger string. Fortunately, JavaScript provides several ways to accomplish this task, and in this blog post, we’ll explore some of the most common approaches.

Using the replace() method with a regular expression

One way to replace all occurrences of a substring is to use the replace() method with a regular expression. Regular expressions are patterns that match one or more characters within a string. By using a regular expression with the global modifier (/g), we can replace all occurrences of a substring within a string.

Here’s an example:

const str = 'The quick brown fox jumps over the lazy dog.';
const newStr = str.replace(/the/gi, 'a');
console.log(newStr);

This code will output “A quick brown fox jumps over a lazy dog.” Note that we’ve used the global and case-insensitive modifiers (/gi) to replace all occurrences of the substring “the” with the letter “a”.

Using the split() and join() methods

Another way to replace all occurrences of a substring is to use the split() and join() methods. The split() method breaks a string into an array of substrings, while the join() method combines an array of substrings into a single string. By splitting the original string at each occurrence of the substring we want to replace, and then joining the resulting array back together with the replacement string, we can effectively replace all occurrences of the substring.

Here’s an example:

const str = 'The quick brown fox jumps over the lazy dog.';
const newStr = str.split('the').join('a');
console.log(newStr);

This code will output the same result as the previous example: “A quick brown fox jumps over a lazy dog.” Note that we’ve split the original string at each occurrence of the substring “the”, and then joined the resulting array back together with the replacement string “a”.

Using the replaceAll() method (from ECMAScript 2021)

Starting with ECMAScript 2021, JavaScript provides a built-in method called replaceAll() that replaces all occurrences of a substring within a string. This method works similarly to the replace() method, but replaces all occurrences of the substring by default, without the need for the global modifier.

Here’s an example:

const str = 'The quick brown fox jumps over the lazy dog.';
const newStr = str.replaceAll('the', 'a');
console.log(newStr);

This code will output the same result as the previous examples: “A quick brown fox jumps over a lazy dog.” Note that we’ve used the replaceAll() method to replace all occurrences of the substring “the” with the replacement string “a”.

Using a loop and the indexOf() method

Finally, if you’re working with an older version of JavaScript that doesn’t support the replaceAll() method, you can use a loop and the indexOf() method to replace all occurrences of a substring. The indexOf() method returns the index of the first occurrence of a substring within a string, or -1 if the substring is not found. By looping through the string and using the indexOf() method to find each occurrence of the substring, we can replace all occurrences of the substring with the replacement string.

Here’s an example:

const str = 'The quick brown fox jumps over the lazy dog.';
const searchStr = 'the';
const replaceStr = 'a';
let index = str.indexOf(searchStr);
let newStr = '';
while (index !== -1) {
	newStr += str.substring(0, index) + replaceStr;
	str = str.substring(index + searchStr.length);
	index = str.indexOf(searchStr);
}
newStr += str;
console.log(newStr);

This code will output the same result as the previous examples: “A quick brown fox jumps over a lazy dog.” Note that we’ve used a loop and the indexOf() method to find and replace all occurrences of the substring “the” with the replacement string “a”.

Conclusion

Replacing all occurrences of a substring within a string is a common task in JavaScript programming. Fortunately, JavaScript provides several ways to accomplish this task, including using the replace() method with a regular expression, the split() and join() methods, the replaceAll() method (from ECMAScript 2021), or a loop and the indexOf() method. By understanding these different approaches, you can choose the one that best fits your specific needs and improve the efficiency and readability of your code.

I hope this blog post has been helpful! If you have any questions or feedback, please feel free to leave a comment below.