JavaScript replaceAll multiple characters and strings

eye-catch JavaScript/TypeScript

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.

Sponsored links

Syntax

The syntax is the same as replace.

replaceAll(pattern, replacement)

pattern can be text as well as regex.

Sponsored links

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 123

replace 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 123

Regex 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 argument

g 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 123

The 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 123

Ignore 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 123

As 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 123

Another 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 123

The 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 zz

All 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)/g

A 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 ba

Both 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 function

It 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

Copied title and URL