Borislav Hadzhiev
Fri Nov 19 2021·3 min read
Photo by Steve Carter
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.
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 parameters to the String.replace method:
The forward slashes / /
mark the beginning and end of the regular expression.
[]
are called a character class and match any of the characters between the brackets. In the first example, we match a dot, underscore and a hyphen.You can adapt the regular expression to your use case, by updating the characters in 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 replace each occurrence of a dot, underscore or hyphen with a space.
replace
method does not change the original string, it returns a new string. Strings are immutable in JavaScript.If you ever need help reading a regular expression, check this regex cheatsheet from MDN out.
The second example shows how to use the String.replaceAll to achieve the same result.
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.
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 parameters to the replaceAll
method:
The difference in performance is most likely negligible, unless you're working with a string that's tens of thousands of characters long.
replaceAll
method returns a new string where the character is 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.
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.
[]
and replace
method approach if the team I'm on is comfortable with regular expressions. Otherwise, I'd probably chain calls to the replaceAll
method.