In this article, you will learn how to replace the occurrence of a string with the built-in
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.
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 the
And replaces a substring in a string with a new one and returns the new string.
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
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);
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
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,
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.
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.
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 the
gflag 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!.