Replace Occurrence of a String in JavaScript
Learn How to Replace the Occurrence of a String With the replace and replaceAll String Methods
There are a couple of ways to replace the occurrence of a substring in JavaScript.
In this article, you will learn how to replace the occurrence of a string with the built-in replace
, and replaceAll
methods provided by the String
type and how to use them.
They allow you to replace the occurrences of a substring in a string and return the new version of the string.
Note that both methods don’t change the original string, but return the new string with the specified substrings replaced with a new value. Let's see how.
Using String.replace
The replace
method accepts two arguments:
pattern
— A string to search for, it could be a string or a regex pattern.replacement
— The text to replace thepattern
with.
And replaces a substring in a string with a new one and returns the new string.
Syntax:
const newString = oldString.replace(pattern, replacement);
Let's take a look at an example:
const quote = 'Voldamot is the greatest Wizard. Voldemort will rule the world!';
const newQuote = quote.replace('Voldamot','Harry Potter')
//outputs: Harry Potter is the greatest Wizard. Voldamot will rule the world!
Here, only the first occurrence of the substring Voldamot
was replaced with the new substring Harry Potter
.
To use the replace
method to replace all occurrences of a substring in a string with a new one, you must use a regular expression.
Using regular expressions
const newString = oldString.replace(regex, replacement);
Here, the replace
method accepts a regular expression as the searchValue
. it then replaces them with the newSubstr
, and returns a new string.
const quote = 'Voldamot is the greatest Wizard. Voldemort will rule the world!';
const newQuote = quote.replace(/Voldamot/g,'Harry Potter')
//outputs: Harry Potter is the greatest Wizard. Harry Potter will rule the world!
By passing the global flag (g)
to the regex pattern, it tells the replace
method to search for all occurrences of Voldamot
in the string, and replace them with Harry Potter
.
Using String.replaceAll
Trying to replace all occurrences of a substring with the replace
method can be quite a workaround. The String
type provides a method that is more straightforward in achieving this, replaceAll
.
const newString = oldString.replaceAll(pattern, replacement);
Introduced in ES2021, the replaceAll
method is a sequel to the String.replace. The replaceAll
method returns a new string in which all occurrences of pattern
are replaced by the replacement
passed to it.
Example:
const str = "David is a self-taught developer. David will rule the world!";
let newStr = str.replaceAll("David","Victor")
//output: Victor is a self-taught developer. Victor will rule the world!.
No need for regular expressions here, making the process seamless.
Wrapping Up
And that’s it. The String
type provides two methods to replace occurrences of a string:
replace()
: only replaces the first occurrence of the substring with replacement, also accepts regular expressions, and uses theg
flag to replace all occurrences of the substring with a new one.replaceAll()
: replaces all occurrences of the substring, method is more straightforward.
And you’re good to go! thanks for reading and, happy coding!.