How to Remove Special Characters From a String in JavaScript

To remove all special characters from a string, call the replace() method on the string, passing a whitelisting regex and an empty string as arguments, i.e., str.replace(/^a-zA-Z0-9 ]/g, ''). The replace() method will return a new string that doesn’t contain any special characters.

For example:

const str = 'milk and @#$%&!bread';

const noSpecialChars = str.replace(/[^a-zA-Z0-9 ]/g, '');

console.log(noSpecialChars); // milk and bread

The String replace() method searches a string for a value (substring or regular expression), and returns a new string with the value replaced by a substring. It doesn’t modify the original string.

The square brackets in the regular expression ([]) indicates a character class. Only characters that are enclosed in it will be matched.

But after placing the caret (^) as the first character in the square bracket, only characters that are not enclosed in the square bracket will be matched.

After the caret, we specify:

  • ranges for lowercase (a-z) and uppercase (A-Z) letters.
  • a range for digits from 0-9.
  • a space character (' ').

So the regex matches any character is not a lowercase or uppercase letter, digit or space, and the replace() method returns a new string with all of these characters removed from the original string.

The g (global) flag specifies that every occurrence of the pattern should be matched.

If we don’t pass a global flag, only the first special character in the string will be matched and removed.

const str = 'milk and @#$%&!bread';

// 👇 No 'g' flag in regex
const noSpecialChars = str.replace(/[^a-zA-Z0-9 ]/, '');

// 👇 Only first special character removed
console.log(noSpecialChars); // milk and #$%&!bread

Get smarter in 5 minutes with Morning Brew (it's free)

Morning Brew logo
There's a reason over 4 million people start their day with Morning Brew - the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be boring...make your mornings more enjoyable, for free.

Shorten regular expression with \w character.

We can shorten this regular expression a bit with the \w character.

const str = 'milk and @#$%&!bread';

const noSpecialChars = str.replace(/[^\w ]/g, '');

console.log(noSpecialChars); // milk and bread

The \w character matches uppercase and lowercase Latin letters, digits, and underscores.

Since \w matches underscores, it can’t be used on its own to remove this special character from a string.

const str = '_milk_ _and _@#$%&!_bread_';

const noSpecialChars = str.replace(/[^\w ]/g, '');

console.log(noSpecialChars); // _milk_ _and_ _bread_

We’ll need a different regex to remove the underscores:

const str = '_milk_ _and _@#$%&!_bread_';

const noSpecialChars = str.replace(/([^\w ]|_)/g, '');

console.log(noSpecialChars); // milk and bread

The pipe symbol (|) allows either of two patterns to be matched in a string, similar to a character class. To use the pipe symbol we need to wrap the two patterns in parentheses (( and )), which is what we did.

Every Crazy Thing JavaScript Does

A captivating guide to the subtle caveats and lesser-known parts of JavaScript.

Every Crazy Thing JavaScript Does

Sign up and receive a free copy immediately.

Leave a Comment

Your email address will not be published. Required fields are marked *