JavaScript String replace vs replaceAll

Question

ECMAScript 2021 has added a new String function replaceAll. A long time ago in a galaxy not so far away, people used split + join or regular expressions to replace all occurences of a string.

I created the following example to compare the new method to the old ones. While I could see some differences in the first case, for example I can't use replacement patterns with split + join or I need to escape special chars with RegExp(str,"g"), I can't see any difference in the second case.

What are the differences between the new method and the old ones (behaviour difference, performance, browser compatibility...) ?

const source = "abcdefabcdef";
const str1 = "abc", str2 = "xyz";
const reg1 = /abc/g, reg2 = "xyz";

//Case 1 : When we want to replace a string by another
console.log(source.split(str1).join(str2));
console.log(source.replace(new RegExp(str1,"g"),str2));
//versus
console.log(source.replaceAll(str1,str2));

//Case 2 : When we want to use a regular expression
console.log(source.replace(reg1,reg2));
//versus
console.log(source.replaceAll(reg1,reg2));

//Result = "xyzdefxyzdef"

Stivers

If I remember correctly this method was mainly added to catch the mistake of not adding the g flag earlier (i.e. it's an actual runtime error, vs logic error that might or might not present itself when the code runs). Browser support: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… . It's also much more explicit than replace with a g-flagged regex. – Outskirts

Please ask only 1 question. – Brigettebrigg

Answer 1

From gleaning the documentation for replaceAll, we find the following tidbits:

const newStr = str.replaceAll(regexp|substr, newSubstr|function)

Note: When using a regexp you have to set the global ("g") flag; otherwise, it will throw a TypeError: "replaceAll must be called with a global RegExp".

In other words, when calling replaceAll with a regex literal or RegExp, it must use the global flag. So, there doesn't seem to be much gained by calling replaceAll versus just using the current replace. However, one difference with replaceAll is that when passing it a string, it will automatically do a global replacement. This is where you might save yourself a bit of typing, by not having to enter a global flag.

Bourgeoisie

I started learning Javascript only after I had a reasonable grasp of PHP. For a really long time, I was continually caught out that myString.replace('apples', 'oranges') is not the equivalent of str_replace('apples', 'oranges', $My_String) (because the PHP function is a global string replace, like replaceAll but unlike replace). – Foulmouthed