JavaScript: Check if a string contains non-alphanumeric characters

Non-alphanumeric characters refer to any character that is not a letter (A-Z, a-z) or a digit (0-9). Examples include symbols (!, @, #), punctuation marks (., ?, :), and whitespace characters (space, tab).

When developing web applications with JavaScript, there might be cases where you want to check whether a string contains non-alphanumeric characters or not (such as when you want to validate a username provided by a user during registration). This concise, example-based article will walk you through a couple of different approaches to doing so. Let’s get started!

Using regular expressions

This solution uses a regular expression with the test() method to check if a string contains non-alphanumeric characters. The regular expression pattern is shown below:

/[^a-zA-Z0-9]/

Code example:

// define a reusable function
const hasNonAlphanumeric = (str) => {
  const regex = /[^a-zA-Z0-9]/;
  return regex.test(str);
};

// Example usage

console.log(hasNonAlphanumeric('wolf123')); 
// false

console.log(hasNonAlphanumeric('slingacademy.com')); 
// true (dot is non-alphanumeric)

console.log(hasNonAlphanumeric('sling_academy')); 
// true (underscore is non-alphanumeric)

This approach is concise, efficient, and reliable. You can also modify the regular expression pattern a little bit in some specific use cases.

Using ASCII Range Comparison

The main idea of this approach is to use the charCodeAt() method of the string object to get the numeric value of each character in the input string and compare it with a range of values that correspond to alphanumeric characters.

The steps:

1. Loop through each character in the input string using a for loop or a forEach method.
2. Use the charCodeAt() method of the string object to get the numeric ASCII value of each character. For example, 'A'.charCodeAt(0) returns 65.
3. Check if the ASCII value falls outside the alphanumeric range (between 48-57, 65-90, 97-122).
4. Return true if a non-alphanumeric character is found, false otherwise.

Code example:

// define a reusable function
const hasNonAlphanumeric = (str) => {
  for (let i = 0; i < str.length; i++) {
    const charCode = str[i].charCodeAt();
    if (
      (charCode < 48 || charCode > 57) && // not 0-9
      (charCode < 65 || charCode > 90) && // not A-Z
      (charCode < 97 || charCode > 122) // not a-z
    ) {
      return true;
    }
  }
  return false;
};

// Example usage

console.log(hasNonAlphanumeric('abc123DEF2024'));
// false

console.log(hasNonAlphanumeric('slingacademy.com'));
// true (dot is non-alphanumeric)

console.log(hasNonAlphanumeric('sling_academy'));
// true (underscore is non-alphanumeric)

This approach might be faster than using regular expressions, especially for long strings or complex patterns. It does not rely on regex, which may have different implementations across browsers or platforms. However, the trade-off is that the code is longer and less readable.