Replace/Remove characters that Don't match Regex in JS

avatar

Borislav Hadzhiev

Sun Nov 21 20212 min read

banner

Photo by Siim Lukka

Replace/Remove characters that Don't match Regex #

To replace or remove characters that don't match a regex, call the replace() method on the string passing it a regular expression that uses the caret ^ symbol, e.g. /[^a-z]+/. The replace method will return new string where the not matching characters are replaced or removed.

index.js
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 parameters to the String.replace method:

  1. a regular expression we want to match in the string
  2. a replacement for each match

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.

When used in a character class the caret ^ matches anything that is not enclosed in the brackets.

In our case anything that is not a latin letter in the range of a-z.

The + 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 new string.

If you ever need help reading a regular expression, check out this regex cheatsheet from MDN. It's by far the best one out there.

The replace method does not change the original string, it returns a new string. Strings are immutable in JavaScript.

The second example, is very similar to the first one, however instead of removing the match characters, we replace them with an exclamation mark.

index.js
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 mark 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.

index.js
// const str = 'hello123!@#'; const str = 'abc123'; const result3 = str.replace(/[^a-z]/g, '!'); console.log(result3); // ๐Ÿ‘‰๏ธ "abc!!!"

The g (global) flag in the example means 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 g flag.

index.js
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 replace method.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee