Replacing Substrings with JavaScript

---

If you’ve ever had to quickly look up how to replace all occurrences of a word or pattern within a string, you’ve probably come across String.prototype.replace(). It’s easy to assume that it’ll work as advertised, except we’ve all skipped reading the docs and just copied the syntax.

The catch: this method only changes the first occurrence of the pattern.

The method expects two parameters: the substring to be replaced (say, target) and the substring to replace it with (say, replacement). What often passes unnoticed during development or code reviews is the target.

Here, target can be a string or a regular expression.

If we want to replace all occurrences of the pattern, we need to pass a regular expression with the global flag enabled. This flag matches all occurrences of that pattern. All standard regex rules still apply, so always cross-check your pattern.

// Example:
const phrase = 'some cool words and some not so cool ones';

const newPhrase = phrase.replace('cool', 'nice');
console.log(newPhrase);
// -> 'some nice words and some not so cool ones'

const regexp = /cool/g;
const newPhrase = phrase.replace(regexp, 'nice');
console.log(newPhrase);
// -> 'some nice words and some not so nice ones'

But this is still prone to mistakes.

With a cursory glance, it is not immediately clear whether we are replacing all occurrences or not. A simple change (or lack thereof) from target to /target/g is not immediately apparent to a team member unfamiliar with the exact specification or those who jump in between cross-functional teams & various languages.

The better alternative with modern JavaScript is to use String.prototype.replaceAll(). While replace() has been supported from the beginning, replaceAll() is a recent addition.

It has the same API as replace(), with minor changes like requiring the RegExp (if used) to enable the global flag.

// Example:
const phrase = 'some cool words and some not so cool ones';

const newPhrase = phrase.replace(/cool/g, 'nice');
console.log(newPhrase);
// -> 'some nice words and some not so nice ones'

const newPhrase = phrase.replaceAll(/cool/g, 'nice');
console.log(newPhrase);
// -> 'some nice words and some not so nice ones'

// But also:
const newPhrase = phrase.replaceAll('cool', 'nice');
console.log(newPhrase);
// -> 'some nice words and some not so nice ones'

Readability improves with a simple addition of three characters. Intent is much more clear too.

No support for IE11, though. Naturally.