Replace Multiple Characters in a String using JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Replace Multiple Characters in a String #

Use the replace() method to replace multiple characters in a string, e.g. str.replace(/[._-]/g, ' '). The first parameter the method takes is a regular expression that can match multiple characters. The method returns a new string with the matches replaced by the provided replacement.

index.js
const str = 'one.two_three-four'; const result1 = str.replace(/[._-]/g, ' '); console.log(result1); // 👉️ "one two three four" // ✅️ without regular expressions const result2 = str .replaceAll('.', '?') .replaceAll('_', '?') .replaceAll('-', '?'); console.log(result2); // 👉️ "one?two?three?four"

We passed the following 2 arguments to the String.replace method:

  1. a regular expression we want to match in the string
  2. the replacement for each match

The forward slashes / / mark the beginning and end of the regular expression.

The square brackets [] are called a character class and match any of the characters between the brackets.

In the first example, we match a dot, an underscore and a hyphen.

You can adjust the regular expression according to your use case by updating the characters between the square brackets and the replacement string.

We used the g (global) flag because we want to match all occurrences of these characters in the string, and not just the first occurrence.

In the first example, we replaced each occurrence of a dot, an underscore or a hyphen with a space.

index.js
const str = 'one.two_three-four'; const result1 = str.replace(/[._-]/g, ' '); console.log(result1); // 👉️ "one two three four"
The replace method doesn't change the original string, it returns a new string. Strings are immutable in JavaScript.

If you ever need help reading a regular expression, check out this regex cheatsheet from MDN.

Alternatively, you can use the String.replaceAll method.

Replace Multiple Characters in a String using replaceAll #

To replace multiple characters in a string, chain multiple calls to the replaceAll() method, e.g. str.replaceAll('.', '!').replaceAll('_', '!'). The replaceAll method will return a new string, where all occurrences of the characters are replaced by the provided replacement.

index.js
const str = 'one.two_three-four'; // 👇️ without regular expressions const result2 = str .replaceAll('.', '?') .replaceAll('_', '?') .replaceAll('-', '?'); console.log(result2); // 👉️ "one?two?three?four"

We passed the following 2 arguments to the replaceAll method:

  1. A substring we want to replace in the string
  2. The replacement for each match
This approach is a bit more verbose then using a regular expression with a character class. However, it allows us to avoid using a regular expression if we have specific characters we want to replace.

The difference in performance is most likely negligible, unless you're working with a string that's tens of thousands of characters long.

The replaceAll method returns a new string where all occurrences of the substring are replaced by the provided replacement. This allows us to chain as many calls to the method as necessary.

An alternative, but also very common approach you might see is using a pipe | character, which serves as an or in regular expressions.

Here's an example that replaces each whitespace, underscore or exclamation mark with a question mark.

index.js
const str = 'one two_three!four'; const result3 = str.replace(/\s|_|!/g, '?'); console.log(result3); // 👉️ "one?two?three?four"

The \s special character matches a whitespace (spaces, tabs, newlines).

The pipe | allows us to match either one of the characters in the regex.

Which approach you pick is a matter of personal preference. I'd go with using a character class [] with the replace method if the team I'm on is comfortable with regular expressions. Otherwise, I'd probably chain calls to the replaceAll method.
I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.