Javascript String Replace vs replaceAll
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...
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"1 Answer
From gleaning the documentation for replaceAll, we find the following tidbits:
const newStr = str.replaceAll(regexp|substr, newSubstr|function)
Note: When using a
regexpyou 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.
James Sterling reports on renewable energy developments, climate policy, ecological conservation, and green tech innovations around the globe.
