Replace Occurrence of a String in JavaScript

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 the pattern 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 the g 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!.