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

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

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 arguments to the String.replace method:

  1. the regular expression we want to match in the string
  2. the 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 ^ means "not the following".

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

If you ever need help reading a regular expression, check out this regex cheatsheet from MDN.

The replace method doesn't 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 matched 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 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.

index.js
const str = 'abc123'; const result3 = str.replace(/[^a-z]/g, '!'); console.log(result3); // 👉️ "abc!!!"
We used the 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 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.

Further Reading #

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.