Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
Subscribe to my email list now at http://jauyeung.net/subscribe/
Replacing all occurrences of a string is something that we often have to do in a JavaScript app.
In this article, we’ll look at how to replace all occurrences of a string in a JavaScript app.
String.prototype.replaceAll
The replaceAll
method is a new method that’s available as part of JavaScript strings since ES2021.
It’s supported by many recent browsers like Chrome, Edge, or Firefox.
To use it, we write:
const result = "1 abc 2 abc 3".replaceAll("abc", "def");
The first argument is the string we want to replace.
And the 2nd argument is the string we want to replace it with.
Therefore, result
is '1 def 2 def 3'
.
Split and Join
We can also split a string by the string that we want to replace and call join
with the string that we want to replace the original string with,
For instance, we can write:
const result = "1 abc 2 abc 3".split("abc").join("def");
to split a string with 'abc'
as the separator and call join
with 'def'
.
And we get the same result returned.
Regex Replace
We can replace a string with the given pattern with a new string.
For instance, we can write:
const result = "1 abc 2 abc 3".replace(/abc/g, 'def');
to replace all instances 'abc'
with 'def'
.
The g
flag means we look for all instances with the given pattern.
We can also use the RegExp
constructor to create our regex object:
const result = "1 abc 2 abc 3".replace(new RegExp('abc', 'g'), 'def');
While Loop and Includes
We can use the includes
method to check if a string has a given substring.
So if it has a given substring, includes
will return true
.
Therefore, we can use it with the while
loop to replace all instances of a substring with a new one by using includes
in the condition.
For instance, we can write:
let str = "1 abc 2 abc 3";
while (str.includes("abc")) {
str = str.replace("abc", "def");
}
We use let
so that we can reassign the value.
The only downside is that we have to mutate the str
variable.
Conclusion
There are many ways to replace all instances of a substring with another one in JavaScript.
The newest and easier way to replace all substrings is to use the replaceAll
method, which comes with ES2021 and is available with most recent browsers.
Top comments (0)