replaceAll was added to ECMAScript2021. The same thing can be done with replace function but the name is clearer for the intention. It can make fewer mistakes with it.
Let’s check how to use it.
Syntax
The syntax is the same as replace.
replaceAll(pattern, replacement)pattern can be text as well as regex.
Recap the usage of replace function
Let’s check how to use replace function first.
const text = "abc bbb abc cc 123";
console.log(text.replace("a", "z")); // zbc bbb abc cc 123
console.log(text.replace(/a/, "z")); // zbc bbb abc cc 123
console.log(text.replace(/a/g, "z")); // zbc bbb zbc cc 123replace function basically replaces only the first match. If we need to replace the pattern for all places, we have to give a regex with g option as you can see on line 4.
replaceAll replaces all matches without regex
I guess many people expect that all matches are replaced in the string with replace for the first time but actually not. However, replaceAll has a clearer name and thus doesn’t cause such an error.
We can simply pass the desired text there like this.
const text = "abc bbb abc cc 123";
console.log(text.replaceAll("a", "z")); // zbc bbb zbc cc 123Regex might be a bit tricky for a beginner but this way is easy to understand.
TypeError: String.prototype.replaceAll called with a non-global RegExp argument
If a regex needs to be used, g option must be added. Otherwise, the following error occurs.
const text = "abc bbb abc cc 123";
console.log(text.replaceAll(/a/, "z"));
// TypeError: String.prototype.replaceAll called with a non-global RegExp argumentg option can be added in this way.
const text = "abc bbb abc cc 123";
console.log(text.replaceAll(/a/g, "z")); // zbc bbb zbc cc 123The behavior is the same as replace function when a regex with g option is used.
const text = "abc bbb abc cc 123";
console.log(text.replace(/a/g, "z")); // zbc bbb zbc cc 123
console.log(text.replaceAll(/a/g, "z")); // zbc bbb zbc cc 123Ignore case difference to replace
Both replace and replaceAll are case-sensitive. If we want to ignore the case difference, it somehow needs to be addressed with a regex.
const text = "abc bbb Abc cc 123";
console.log(text.replaceAll("a", "z")); // zbc bbb Abc cc 123As you can see above, only a lowercase match was replaced.
The simplest solution for this is to add i option to ignore the case.
console.log(text.replaceAll(/a/gi, "z")); // zbc bbb zbc cc 123Another solution is to add both lower/upper case in the regex.
For this simple case, we can use [replaced letters].
console.log(text.replaceAll(/[aA]/g, "z")); // zbc bbb zbc cc 123The result is the same as the previous one.
replace multiple characters
As we did for the same thing to ignore the case, we can replace multiple characters in a string by using [replace characters].
const text = "ab bb bc Ab ab cc 123 ba";
console.log(text.replaceAll(/[ab]/gi, "z")); // zz zz zc zz zz cc 123 zzAll a and b are replaced with z.
replace multiple strings
By using a regex, we can easily replace multiple words in the string. Define the desired strings in the following way.
/(word1|word2|word3)/gA vertical line | is a separator for the words. The parentheses are for grouping those multiple words. If we want to ignore the case, add i option there.
const text = "ab bb bc Ab ab cc 123 ba";
console.log(text.replaceAll(/(ab|bc)/g, "zz")); // zz bb zz Ab zz cc 123 ba
console.log(text.replaceAll(/(ab|bc)/gi, "zz")); // zz bb zz zz zz cc 123 baBoth ab and bc are replaced with zz in this way.
TS2550: Property ‘replaceAll’ does not exist
The following error can be thrown if the configuration is not set properly.
TS2550: Property 'replaceAll' does not exist on type '"abc bbb abc cc 123"'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2021' or later.As it’s written in the error message, we need to add es2021 to tsconfig.json.
{
"compilerOptions": {
// other configurations here...
"lib": [
"es2021"
],
// other configurations here...
}
}After adding the configuration, I got the following error.
TypeError: text.replaceAll is not a functionIt seems that the function is supported Node.js version 15 or later. I was using version 14. Update the Node.js version in this case.
Comments