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"
3.1 The difference between replaceAll() and replace() If search argument is a string, replaceAll() replaces all occurrences of search with replaceWith , while replace() only the first occurence. If search argument is a non-global regular expression, then replaceAll() throws a TypeError exception.
replaceAll() The replaceAll() method returns a new string with all matches of a pattern replaced by a replacement . The pattern can be a string or a RegExp , and the replacement can be a string or a function to be called for each match. The original string is left unchanged.
To replace all occurrences of a substring in a string by a new one, you can use the replace() or replaceAll() method: replace() : turn the substring into a regular expression and use the g flag.
The replace() method searches a string for a value or a regular expression. The replace() method returns a new string with the value(s) replaced. The replace() method does not change the original string.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With