Regular Expression for JavaScript to Allow Only Alphanumeric Characters

This article explains how to remove all the non-alphanumeric characters from a string. You can use a RegEx expression that matches all the characters except a number or an alphabet in JavaScript.

Regular Expression for JavaScript to Allow Only Alphanumeric Characters

You will use the given regular expression to validate user input to allow only alphanumeric characters. Alphanumeric characters are all the alphabets and numbers, i.e., letters A–Z, a–z, and digits 0–9.

The syntax for RegEx is given below.

Regex: ^[a - zA - Z0 - 9] + $

With the alphanumeric RegEx at our disposal, the solution for allowing only alphanumeric characters from a string using RegEx becomes extremely simple.

You can set up a character class that enables a range of characters, with an added quantifier that repeats the character class one or more times and anchors that bind the match to the start and end of the string.

To remove non-alphanumeric characters from a string, you will first call the replace() method and pass a regular expression (RegEx) that matches all non-alphanumeric characters as the first parameter and an empty string as the second parameter.

The str.replace() method will return a new string with all characters replaced.

It can be done in the following way.

// a string
const str = '#BLOCTAKSolutions123?%';

// regex expression is used to match all non-alphanumeric characters in a string

const regex = /[^A-Za-z0-9]/g;

// using the replace() method to match and remove all the non-alphanumeric
// characters

const newStr = str.replace(regex, '');

console.log(newStr);  // BLOCTAKSolutions123

The screenshot below shows the output for this program.

The following parameters are passed through to the string.replace method.

1. A regular expression (RegEx) you want to match in the string.
2. A replacement for each match. In your case, it will be an empty string because you want to remove all the non-alphanumeric characters.

The forward slashes (/ /) mark the start and end of a RegEx. The square brackets [] are known as a character class.

The caret ^ symbol means “not the following”. In your case, this will mean no letters in the range of a-z and numbers 0-9.

You will use the g (global) flag to match all the events containing non-alphanumeric characters and not just the first event. The i flag makes your match case insensitive - you will match all uppercase and lower case characters.

If you are also required to preserve spaces, hyphens, or other characters, add them between the square brackets [].

For example, imagine you have a string like this #BLOCTAKSolutions123?% as shown in the JavaScript code below.

// a string
const str = '#BLOCTAKSolutions123?%';

As you can see from the string in the above code, there are some characters like #?%. However, they are not a number or an alphabet.

So here, we will define a regex expression to match all the non-alphanumeric characters in the string.

// a string
const str = '#BLOCTAKSolutions123?%';

// regex to match all non-alphanumeric characters in string
const regex = /[^A-Za-z0-9]/g;

Now you will use the replace() string method and do the following actions.

1. pass the regex expression as the first argument to the method.
2. pass an empty string '' as the second argument to the method.
3. the method will return a new string.

This JavaScript code will remove all the non-alphanumeric characters from your string and replace them with an empty string. It will be done in the following way, as shown in the JavaScript code below.

const newStr = str.replace(regex, '');

console.log(newStr);  // BLOCTAKSolutions

As you can see, the newStr is a new string but with all the non-alphanumeric characters removed. This code preserves all alphanumeric characters, spaces, and dashes.

You can adjust the regular expression to your needs by adding or subtracting the characters in the square brackets ([]).

The replace method is not used to change the contents of the original string; it only returns a new string. The reason for this is that strings are immutable in JavaScript.

So with the help of this JavaScript tutorial article, you have learned how to remove all the non-alphanumeric characters from a string using a regular expression (RegEx) in JavaScript.

You can use the str.replace() method to achieve this. The str.replace() method will return a new string with all the characters replaced.