How To Replace All Occurrences of a String in JavaScript

String replacement is a common introductory skill and an often-needed step in data manipulation.

JavaScript has a very simple and straightforward option for string replacement, but it has some shortcomings that require modification or a completely different alternative to achieve a “full replacement” where every occurrence is swapped.

The .replace() Method

JavaScript has a native String method for substring replacement. The .replace() method takes two arguments — a search string and a replacement string.let phrase = "If teh shoe fits";phrase = phrase.replace("teh", "the");console.log(phrase); // If the shoe fits

Notice we have to reassign phrase.replace() to phrase. This is because .replace() does not modify the original value.

This method works fantastically…until you want to replace more than the first occurrence of the search string.let phrase = "teh teh teh";phrase = phrase.replace("teh", "the");console.log(phrase); // the teh teh

Here are two options where you need to replace all of the occurrences of the search string. One continues to use the .replace() method while the other uses a combination of the .split() and .join() methods.

Using Regular Expressions

The .replace() method can actually accommodate replacing all occurrences; however, the search string must be replaced with a regular expression. A regular expression — regex for short — is an expression that is set and compared against a base string.

To specify that we’re using a regular expression, the search string is nested within forward slashes. To globalize the replacement, we use the g modifier after the second forward slash.let phrase = "teh teh teh";phrase = phrase.replace(/teh/g, "the");console.log(phrase); // the the the

The challenge of using regular expressions is in the special characters used to craft the expression itself.

Regex can be overwhelming and look like hieroglyphics if you are not well-versed. Moreover, if your string itself contains special characters then the expression’s complexity increases that much more.

That being said, this is often the most performant option. So, if you’re comfortable with regex and your string does not contain special characters to conflict, then choose this option.

Using the .split().join() Technique

For a less syntactically demanding option that will bypass familiarity with regex and use tools you are most likely already familiar with, we can use the combination of .split() and .join() in sequence to convert our string to an array and back into a string.

The search string will be used as the original delimiter — effectively removing it from the data — while the replacement string is used as the new delimiter, placing it in the same position(s) as the original search string.let phrase = "teh teh teh";phrase = phrase.split("teh").join("the");console.log(phrase); // the the the

To see this in “slow motion”, we can break-up the method chain and print each step.let phrase = "teh teh teh";phrase = phrase.split("teh");
console.log(phrase); // ["", " ", " ", ""]phrase = phrase.join("the");
console.log(phrase); // the the the

The split-out array may look weird with the empty strings, but that is because our delimiter happened to be the first, as well as the last, characters in the string.

Do you have another method for substring replacement? Which do you find easier to read and write? Let us know in the comments below!