Replace Multiple Characters in a String Using JavaScript

When you need to replace multiple characters in a JavaScript string, you need to use the replace() method and a regular expression so that you can find and replace all occurrences of different characters in your string.

The replace() method is used to replace a single occurrence of a specific character with another character that you want.

When calling the method, you need to specify two parameters:

1. The character to replace (string), and
2. The character to be inserted (string or function).

The parameters are case-sensitive. In the following example, you see how the replace() method is used to replace the character e with U:

let oldString = "Hello World!";
let newString = oldString.replace("e", "U");

console.log(newString); // HUllo World!

Knowing how the replace() method works, you can use it to replace multiple characters by calling the method as many times as you need, passing different parameters in each call.

The example below shows how to replace the characters e with U, then ! with Z:

let oldString = "Hello World!";
let newString = oldString.replace("e", "U").replace("!", "Z");

console.log(newString); // HUllo WorldZ

While you can replace multiple characters with this solution, one drawback of the solution is that you’ll have a long code line that’s actually just calling the replace() method many times.

You can improve the solution by using a combination of the regular expression and a JavaScript object. First, you specify the characters you want to replace in an object as follows:

let charsToReplace = {
  "e": "U",
  "!": "Z",
};

Next, you call the replace method and pass a regular expression as the first parameter. This regular expression contains the characters you want to replace from the string.

As the second parameter, you need to pass an arrow function that returns the property of the object that matches the regular expression:

let charsToReplace = {
  "e": "U",
  "!": "Z",
};
  
let oldString = "Hello World!";
let newString = oldString.replace(/e|!/g, match => charsToReplace[match]);

console.log(newString); // HUllo WorldZ

Here, the regular expression will search for the characters e and ! in the string. The g option is added so that the expression doesn’t stop after finding the first match.

The replace() method allows you to pass a string or a function. When you pass a function, you can further manipulate the value you want to use as the replacement for the original character.

As you can see, the code above successfully replaces the characters e and ! with their respective replacements. However, keep in mind that you need to update the regular expression and the charsToReplace object anytime you want to replace a new character.

You can further improve this code by creating the regular expression from the keys of the charsToReplace object. Let’s call it the searchPattern:

let charsToReplace = {
  "e": "U",
  "!": "Z",
};
  
let oldString = "Hello World!";

let searchPattern = new RegExp(Object.keys(charsToReplace).join("|"), "g");

let newString = oldString.replace(searchPattern, match => charsToReplace[match]);

console.log(newString); // HUllo WorldZ

Alright! Now anytime you want to replace a specific character, you only need to put the character in the charsToReplace object.

By using a regular expression, you can find and replace all matching characters with a single call to the replace() method.

I hope this tutorial is useful. Happy coding and see you later! 👋