JavaScript Program to Remove Non-Alphanumeric Characters from a String
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.
Table of Content
- Approach 1: Using Regular Expressions
- Approach 2: Using a Loop and Character Checking
- Approach 3: Using the replace() Method with a Custom Function
- Approach 4: Using Array Filter and Regular Expression
- Approach 5: Using the reduce() Method
- Approach 6: Using Array Map and Join
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);
Output
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);
Output
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);
Output
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
Output
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
Output
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
Output
HelloThisis123ateststring