How to use replaceAll() with regex JavaScript? [SOLVED]

Introduction

Replacement or substitution is a process that we might often do especially with Strings. Though strings are immutable, we can create copies of the string with certain portions of it replaced with new values.

JavaScript provides an instance method called the replaceAll method which allows us to match patterns within a string and returns a new string with the replacement.

If you need to perform a replacement based on a regular expression (regex), you can use the string replaceAll() method. This method is available on all strings in JavaScript.

 

Using the replaceAll() method

The replaceAll() method accepts two arguments. The first argument is the string or regex to match (pattern). The second argument is the replacement. The replacement can be a string or a function.

If you pass a string as the second argument, all matches will be replaced with that string. If you pass a function, the function will be called for each match. The function should return the replacement string.

 

Using string as a pattern

Here are some examples of using the replaceAll() method where the first argument is a string

let str = "Hello world!";

// Replace all occurrences of 'Hello' with 'Goodbye'
str = str.replaceAll("Hello", "Goodbye");
console.log(str);

// Replace all occurrences of 'world' with 'Earth'
str = str.replaceAll("world", "Earth");
console.log(str);

// Replace all occurrences of '!' with '?'
str = str.replaceAll("!", "?");
console.log(str);

Output

Goodbye world!
Goodbye Earth!
Goodbye Earth?

 

Using regex as a pattern

We can make use of regular expressions to define the pattern we want to replace with the replacement string. Here are some examples of using the replaceAll() method where the first argument is a regex pattern

let str =
    "Hello World! Welcome to my world. This is command post 234, area Clex.";

// Replace all occurrences of 'Hello' with 'Goodbye'
str = str.replaceAll(/world/g, "abode");
console.log(str);

// Replace all number occurrences with X
str = str.replaceAll(/\\d/g, "X");
console.log(str);

// Replace all a b c occurences with ?
str = str.replaceAll(/[abc]/g, "?");
console.log(str);

Output

Hello World! Welcome to my abode. This is command post 234, area Clex.
Hello World! Welcome to my abode. This is command post XXX, area Clex.
Hello World! Wel?ome to my ??ode. This is ?omm?nd post XXX, ?re? Clex.

 

Using function as the replacement string

We can replace the pattern we intend based on the value of a function as long as the function value is a string. Therefore, for every string or pattern match, we call the function on it. Here is an example of using a function as the replacement.

let str =
    "Hello World! Welcome to my world. This is command post 234, area Clex.";

// Replace all number occurences with different values
// based on the anonymous function
str = str.replaceAll(/\\d/g, (a) => {
    if (a == 2) {
        return "two";
    } else if (a == 3) {
        return "three";
    } else {
        return "num";
    }
});

console.log(str);

Output

Hello World! Welcome to my world. This is command post twothreenum, area Clex.

As you can see the values 2 and 3 have been replaced by two and three and 4 was replaced by num.

 

Summary

The replaceAll() method can use both string or regex to replace parts or portions of a string with a replacement where the replacement can be a string or a function. The function will be called upon every match and must return a string.

 

References

String.prototype.replaceAll() - JavaScript | MDN (mozilla.org)