Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to replace all occurrences of a string in JavaScript?
In JavaScript, there are several methods to replace all occurrences of a substring within a string. This tutorial covers three effective approaches: using split() and join(), regular expressions with replace(), and the modern replaceAll() method.
Using split() and join()
This method splits the string at each occurrence of the target substring, then joins the parts back together with the replacement string.
Syntax
const given_string = "original string"; const to_replace = "substring to find"; const replacement = "replacement string"; const string_after_splitting = given_string.split(to_replace); const required_string = string_after_splitting.join(replacement);
Example
<!DOCTYPE html>
<html>
<body>
<h3>Click the button to replace all occurrences</h3>
<button onclick="replaceUsingSplit()">Replace using split/join</button>
<div id="result1"></div>
<script>
function replaceUsingSplit() {
const given_string = "In this string, every a is going to be a large a";
const to_replace = 'a';
const replacement = 'A';
const string_after_splitting = given_string.split(to_replace);
const required_string = string_after_splitting.join(replacement);
document.getElementById('result1').innerHTML =
"Previous string: " + given_string + "<br>" +
"After replacement: " + required_string;
}
</script>
</body>
</html>
Using replace() with Regular Expression
The replace() method with a global regular expression flag (g) finds and replaces all occurrences of the pattern.
Syntax
const given_string = "original string"; const to_replace = new RegExp(to_replace_string, 'g'); const replacement = "replacement string"; const required_string = given_string.replace(to_replace, replacement);
Example
<!DOCTYPE html>
<html>
<body>
<h3>Click the button to replace using regex</h3>
<button onclick="replaceUsingRegex()">Replace using regex</button>
<div id="result2"></div>
<script>
function replaceUsingRegex() {
const given_string = "In this string, every a is going to be a large a";
const to_replace = new RegExp('a', 'g');
const replacement = 'A';
const required_string = given_string.replace(to_replace, replacement);
document.getElementById('result2').innerHTML =
"Previous string: " + given_string + "<br>" +
"After replacement: " + required_string;
}
</script>
</body>
</html>
Using replaceAll() Method
The replaceAll() method is the most straightforward approach, introduced in ES2021. It directly replaces all occurrences without requiring regular expressions.
Syntax
const given_string = "original string"; const to_replace = "substring to find"; const replacement = "replacement string"; const required_string = given_string.replaceAll(to_replace, replacement);
Example
<!DOCTYPE html>
<html>
<body>
<h3>Click the button to replace using replaceAll</h3>
<button onclick="replaceUsingReplaceAll()">Replace using replaceAll</button>
<div id="result3"></div>
<script>
function replaceUsingReplaceAll() {
const given_string = "In this string, every a is going to be a large a";
const to_replace = 'a';
const replacement = 'A';
const required_string = given_string.replaceAll(to_replace, replacement);
document.getElementById('result3').innerHTML =
"Previous string: " + given_string + "<br>" +
"After replacement: " + required_string;
}
</script>
</body>
</html>
Comparison
| Method | Browser Support | Simplicity | Performance |
|---|---|---|---|
| split() + join() | Excellent | Moderate | Good |
| replace() + regex | Excellent | Moderate | Very Good |
| replaceAll() | Modern browsers only | Very Easy | Very Good |
Conclusion
For modern JavaScript applications, replaceAll() is the recommended approach due to its simplicity and readability. For legacy browser support, use replace() with a global regular expression or the split/join method.
11K+ Views
