Remove Non Alphanumeric Characters in JavaScript – 4 ways

Removing non alphanumeric characters from strings is a common task when doing form validation in Javascript. Non-alphanumeric characters include symbols, punctuation, and whitespace. In this article, we’ll explore various methods for achieving this in JavaScript.

Remove non alphanumeric characters – Javascript

1. Regular Expressions

Regex is one common operation to remove non-alphanumeric characters from a string. You can use regex (Regular expressions) pattern matching and string manipulation in JavaScript to remove non-alphanumeric characters by replacing them with an empty string. Here’s an example:

const inputString = "Hello, World!";
const alphanumericString = inputString.replace(/[^a-zA-Z0-9]/g, '');
console.log(alphanumericString); 

"HelloWorld"

In this code, the replace method searches for any characters that are not alphanumeric (specified by the regex /[^a-zA-Z0-9]/g) and replaces them with an empty string.

2. Sring Iteration

You can iterate over each character in a string and build a new string by selectively including only alphanumeric characters. Here’s an example using a for loop in Javascript:

function removeNonAlphanumeric(inputString) {
  let alphanumericString = '';
  for (let i = 0; i < inputString.length; i++) {
    const char = inputString[i];
    if (/[a-zA-Z0-9]/.test(char)) {
      alphanumericString += char;
    }
  }
  return alphanumericString;
}

const inputString = "Hello, World!";
const result = removeNonAlphanumeric(inputString);

console.log(result); // Output: "HelloWorld"

In this method, we test each character with a regex pattern to determine if it’s alphanumeric and then append it to the result string.

3. Regular Expressions with replace and trim

If you want to remove leading and trailing spaces in addition to non-alphanumeric characters, you can use replace and trim together. Here’s an example:

const inputString = "   Hello, World!   ";
const alphanumericString = inputString.replace(/[^a-zA-Z0-9]/g, '').trim();

console.log(alphanumericString); // Output: "HelloWorld"

In this code, replace removes non-alphanumeric characters, and trim eliminates leading and trailing spaces.

4. JavaScript ES6 Filter and Join

ES6 introduced new array methods that make it easier to work with strings. You can use the Array.prototype.filter method to filter out non-alphanumeric characters and then join the resulting array back into a string. Here’s an example:

const inputString = "Hello, World!";
const alphanumericString = inputString.split('').filter(char => /[a-zA-Z0-9]/.test(char)).join('');

console.log(alphanumericString); // Output: "HelloWorld"

In this code, we first split the input string into an array of characters, then use filter to keep only alphanumeric characters, and finally, we join the filtered characters to form a new string.