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'
Readability improves with a simple addition of three characters.
No support for IE11, though. Naturally.