Last updated: Jul 25, 2022
Photo from Unsplash
To replace or remove characters that don't match a regex, call the
method on the string passing it a regular expression that uses the caret
replace method will return new string where the
not matching characters are replaced or removed.
const str = 'hello123!@#'; // ✅ Remove not matching const result1 = str.replace(/[^a-z]+/, ''); console.log(result1); // 👉️ hello // ✅ Replace not matching const result2 = str.replace(/[^a-z]+/, '!'); console.log(result2); // 👉️ hello! // ✅ Replace each occurrence of not matching const result3 = str.replace(/[^a-z]/g, '='); console.log(result3); // 👉️ "hello======"
We passed the following 2 arguments to the String.replace method:
The first example shows how to remove all characters that are not lowercase, latin letters.
The forward slashes
/ / mark the beginning and end of the regular expression.
The square brackets
 are called a character class.
^means "not the following".
In our case, anything that is not a latin letter in the range of
+matches the preceding item (the character class) one or more times. In other words, we consider multiple non-lowercase, latin letters to be a single match.
For any character that is not a lowercase, latin letter, we provided an empty string as a replacement to remove the character from the string.
If you ever need help reading a regular expression, check out this regex cheatsheet from MDN.
The second example is very similar to the first one. However, instead of removing the matched characters, we replace them with an exclamation mark.
const str = 'hello123!@#'; // ✅ Replace not matching const result2 = str.replace(/[^a-z]+/, '!'); console.log(result2); // 👉️ hello!
The regular expression in the third example is a little different.
It doesn't use the plus (+) to to match the preceding item one or more times.
Instead, it uses the
g (global) flag to match each occurrence of the regular
expression (a non-lowercase, latin character).
This allows us to replace each occurrence of a character that doesn't match the regex with a provided replacement, instead of matching multiple non-matching characters next to one another with a single replacement.
const str = 'abc123'; const result3 = str.replace(/[^a-z]/g, '!'); console.log(result3); // 👉️ "abc!!!"
g(global) flag because we want to match all occurrences of a non-lowercase, latin letter, and not just the first occurrence.
If you only need to replace the first occurrence of a non-matching character,
you can remove the
const str = 'abc123'; const result3 = str.replace(/[^a-z]/, '!'); console.log(result3); // 👉️ "abc!23"
In this example we only replaced the first occurrence of a non-matching
character. This is the default behavior of the