JavaScript - How to Replace Multiple Characters in a String?
Last Updated : 26 Nov, 2024
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.
JavaScript const s1 = "hello world!"; const s2 = s1.replace(/[elo]/g, "x"); console.log(s2);
- [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.
JavaScript const s1 = "hello world!"; const s2 = s1.replaceAll("l", "x").replaceAll("o", "y"); console.log(s2); 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.
JavaScript const s1 = "hello world!"; const s2 = s1.split("l").join("x").split("o").join("y"); console.log(s2); 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().
JavaScript 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); 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.
JavaScript 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);
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.
JavaScript 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); 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.
JavaScript 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); 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.
JavaScript const s1 = "hello world!"; const s2 = s1.replace("e", "x").replace("l", "y").replace("o", "z"); console.log(s2); This is simple for a small number of replacements but becomes difficult to manage for larger sets.
Which Approach Should You Use?
| Approach | When to Use |
|---|
| Using replace() with Regex | Best for replacing multiple characters in one go with a consistent replacement. |
| Using replaceAll() | Ideal for replacing a single character or substring globally. |
| Using split() and join() | Good for replacing one character at a time without regex. |
| Using Regular Expressions with Callback | Best for replacing multiple characters with different replacements. |
| Using reduce() | Useful when handling dynamic lists of replacements. |
| Using Map/Object for Replacement | Efficient for predefined character mappings. |
| Chained replace() Calls | Simple but limited to small sets of replacements. |
The replace() with regular expression and object mapping methods are the most efficient for replacing multiple characters.