We will see how to remove non-alphanumeric characters from a string in JavaScript. Non-alphanumeric characters are symbols, punctuation, and whitespace. Removing them from a string This task can be useful when you want to clean up user inputs, sanitize strings, or perform various text processing operations.

There are multiple approaches to removing non-alphanumeric characters from a string in JavaScript.

We will explore all the above methods along with their basic implementation with the help of examples.

Approach 1: Using Regular Expressions

Regular expressions offer a concise way to match and remove non-alphanumeric characters. We can use the replace() method with a regular expression to replace all non-alphanumeric characters with an empty string.

Syntax:

function removeNonAlphanumeric(inputString) {
    return inputString.replace(/[^a-zA-Z0-9]/g, '');
};

Example: In this example we are using the above-explained approach.

function removeFunction(inputString) {
    return inputString.replace(/[^a-zA-Z0-9]/g, '');
}

const originalString = 
    "Hello! This is 123 a test string.";
const result = 
    removeFunction(originalString);
console.log(result);

HelloThisis123ateststring

Approach 2: Using a Loop and Character Checking

By iterating through each character in the string and checking if it’s alphanumeric, we can construct the resulting string without non-alphanumeric characters.

Syntax:

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

Example: In this example we are using the above-explained approach.

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

const originalString = 
    "Hello! This is 123 a test string.";
const result = 
    removeFunction(originalString);
console.log(result);

HelloThisis123ateststring

Approach 3: Using the replace() Method with a Custom Function

The replace() method can be used with a custom function that checks each character and replaces non-alphanumeric characters.

Syntax:

function removeNonAlphanumeric(inputString) {
    return inputString.replace(/./g, char => {
        if (/[a-zA-Z0-9]/.test(char)) {
            return char;
        }
        return '';
    });
}

Example: In this example we are using the above-explained approach.

function romveFunction(inputString) {
    return inputString.replace(/./g, char => {
        if (/[a-zA-Z0-9]/.test(char)) {
            return char;
        }
        return '';
    });
}

const originalString = 
    "Hello! This is 123 a test string.";
const result = 
    romveFunction(originalString);
console.log(result); 

HelloThisis123ateststring

Approach 4: Using Array Filter and Regular Expression

In this approach, we split the input string into an array of characters using split(”), then we use the filter() method along with a regular expression to filter out non-alphanumeric characters. Finally, we join the filtered array back into a string using join(”).

Example:

function removeNonAlphanumeric(inputString) {
    return inputString.split('').filter(char => /[a-zA-Z0-9]/.test(char)).join('');
}

const originalString = "Hello! This is 123 a test string.";
const result = removeNonAlphanumeric(originalString);
console.log(result); // Output: HelloThisis123ateststring

HelloThisis123ateststring

Approach 5: Using the reduce() Method

The reduce() method can be used to iterate over each character in the string, accumulate only the alphanumeric characters, and construct the resulting string.

Example:

function removeFunction(inputString) {
    return inputString.split('').reduce((acc, char) => {
        return /[a-zA-Z0-9]/.test(char) ? acc + char : acc;
    }, '');
}

const originalString = "Hello! This is 123 a test string.";
const result = removeFunction(originalString);
console.log(result); // Output: HelloThisis123ateststring

HelloThisis123ateststring

Approach 6: Using Array Map and Join

In this approach, we split the input string into an array of characters using split(”), then we use the map() method to replace non-alphanumeric characters with an empty string. Finally, we join the transformed array back into a string using join(”).

Example:

function removeNonAlphanumeric(inputString) {
    return inputString.split('').map(char => {
        return /[a-zA-Z0-9]/.test(char) ? char : '';
    }).join('');
}

const originalString = "Hello! This is 123 a test string.";
const result = removeNonAlphanumeric(originalString);
console.log(result); // Output: HelloThisis123ateststring

HelloThisis123ateststring

Approach 7: Using filter Method with String Conversion

In this approach, we convert the input string to an array of characters using Array.from(), then use the filter method to keep only alphanumeric characters. Finally, we convert the filtered array back into a string using join().

Example: This example demonstrates how to remove non-alphanumeric characters using the filter method and string conversion.

function removeNonAlphanumeric(inputString) {
    return Array.from(inputString)
                .filter(char => /[a-zA-Z0-9]/.test(char))
                .join('');
}

// Example usage:
let inputString = "Hello, World! 123.";
let cleanedString = removeNonAlphanumeric(inputString);
console.log(cleanedString);  // Output: "HelloWorld123"

HelloWorld123