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

Subscribe to Coding Beauty Newsletter

Gain useful insights and advance your web development knowledge with weekly tips and tutorials from Coding Beauty. Over 2,000 developers subscribe.

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 [email protected]#$%&!_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 [email protected]#$%&!_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.

11 Amazing New JavaScript Features in ES13

This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.

11 Amazing New JavaScript Features in ES13

Sign up and receive a free copy immediately.

Leave a Comment

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