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
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.
