JavaScript - How to Replace Multiple Characters in a String?

Here are the various methods to replace multiple characters in a string in JavaScript.

1. Using replace() Method with Regular Expression

The replace() method with a regular expression is a simple and efficient way to replace multiple characters.

const s1 = "hello world!";
const s2 = s1.replace(/[elo]/g, "x");

console.log(s2);

hxxxx wxrxd!

• [elo] matches the characters e, l, and o.
• The g flag ensures all occurrences are replaced.

2. Using replaceAll() Method

The replaceAll() method can replace all instances of specific characters or strings without the need for a regular expression.

const s1 = "hello world!";
const s2 = s1.replaceAll("l", "x").replaceAll("o", "y");

console.log(s2); 

hexxy wyrxd!

This is suitable for replacing multiple characters sequentially, but you need to chain multiple replaceAll() calls.

3. Using split() and join() Method

You can replace characters by splitting the string and joining it back with the desired character.

const s1 = "hello world!";
const s2 = s1.split("l").join("x").split("o").join("y");

console.log(s2);

hexxy wyrxd!

This approach works well when replacing one character at a time and avoids regular expressions.

4. Using Regular Expressions for Multiple Replacements

If you need to replace multiple characters with different replacements, you can use a regular expression with a callback function in replace().

const s1 = "hello world!";
const s2 = s1.replace(/[elo]/g, (char) => {
    const replacement = { e: "x", l: "y", o: "z" };
    return replacement[char] || char;
});

console.log(s2); 

hxyyz wzryd!

This approach provides flexibility and is efficient for handling complex replacement logic.

5. Using reduce() Method

The reduce() method can be used to apply multiple replacements iteratively.

const s1 = "hello world!";
const replacements = [["l", "x"], ["o", "y"]];

const s2 = replacements.reduce(
    (str, [target, replacement]) => 
        str.split(target).join(replacement),
    s1
);

console.log(s2); 

hexxy wyrxd!

This is useful when you have a dynamic list of characters to replace.

6. Using a Map for Replacement

A Map can store character mappings, and you can iterate through the string to apply replacements.

const s1= "hello world!";
const map = new Map([["e", "x"], ["l", "y"], ["o", "z"]]);

const s2 = [...s1].map((char) => map.get(char) || char).join("");

console.log(s2);

hxyyz wzryd!

This approach is efficient and clean when dealing with predefined replacements.

7. Using an Object for Character Mapping

Similar to a Map, an object can store character mappings for replacements.

const s1 = "hello world!";
const map = { e: "x", l: "y", o: "z" };

const s2 = s1
    .split("")
    .map((char) => map[char] || char)
    .join("");

console.log(s2);

hxyyz wzryd!

This is a simple alternative to Map and works well for smaller datasets.

8. Using Chained replace() Calls

You can also chain multiple replace() calls for replacing different characters.

const s1 = "hello world!";
const s2 = s1.replace("e", "x").replace("l", "y").replace("o", "z");

console.log(s2);

hxylz world!

This is simple for a small number of replacements but becomes difficult to manage for larger sets.

Which Approach Should You Use?

The replace() with regular expression and object mapping methods are the most efficient for replacing multiple characters.