How to Remove Vowels from a String using JavaScript?

To remove vowels from a string in JavaScript, call the replace() method on the string from which you want to remove vowels, pass a regular expression /[aeiou]/gi as its first parameter and an empty string('') as its second parameter.

If you do so, the replace() method will return a new string which is formed by replacing all the vowels(uppercase and lowercase both) of the original string with an empty string('').

// String with vowels
const string = "Programmers Portal";

// Replace vowels with empty string('')
const withoutVowels = string.replace(/[aeiou]/gi, '');

// Print the new string
console.log(withoutVowels);

Output:

"Prgrmmrs Prtl"

In the regular expression /[aeiou]/gi:

• //: represents the start and end of the string respectively
• [aeiou]: Represents a pattern that matches any of the 5 vowels of the English alphabet
• g: the g(global) flag indicates a global search, which means that the regular expression will match all occurrences of the pattern in the input string, rather than just the first occurrence.
• i: the i(ignore case) flag represents a case-insensitive search in the given string

Please note that the original string is not modified by the replace() method, instead, it returns a new string with the matched characters.

Remove Vowels from String using For Loop

You can also use a for loop with some if...else conditions to remove vowels from a string.

In this approach, we run a for loop over the entire string and one by one check each character if it is a vowel or not.

If the current character of the string is not a vowel, we append it to a new string. If it is a vowel, we do nothing.

As the loop finishes, we get a new string that doesn’t contain any vowels.

// String with vowels
const str = "Programmers Portal";

// Create an empty string
let noVowels = "";

// Run a for loop over the original string
for(let i = 0; i < str.length; i++) {
    // Convert the character to lowercase
    const char = str[i].toLowerCase();
    
    // Check if the current character isn't a vowel
    if(char !== 'a' && char !== 'e' && char !== 'i' && char !== 'o' && char !== 'u') {
        noVowels += str[i];
    }
}

// Print the new string
console.log(noVowels); 

Output:

"Prgrmmrs Prtl"

Remove Vowels from String using filter() Method

There is one more interesting approach that you can use to remove vowels from a string, the Array.filter() method.

But the filter() method only works with arrays. So, we have to first convert the string into an array using the Array.from() method and then call the filter() method on this array to filter non-vowel characters.

// String with vowels
const str = "Programmers Portal";

// Convert string to array
const charArray = Array.from(str);

// Filter non-vowel characters
const noVowelArr = charArray.filter(char=>!'aeiouAEIOU'.includes(char));

// Join array elements with empty string('')
const noVowelStr = noVowelArr.join('');

// Print the string
console.log(noVowelStr);

Output:

"Prgrmmrs Prtl"

In this approach, we convert the string into an array using the Array.from() method and then use the filter() method to filter out vowels from the array. Finally, we join the remaining characters back into a string using the join() method.

We can also chain all the steps into a single line of code using the dot(.) operator.

The end result will still be the same.

// String with vowels
const str = "Programmers Portal";

// Remove vowels from string
const noVowelStr = Array.from(str)
                    .filter(char => !'aeiouAEIOU'.includes(char))
                    .join('');

console.log(noVowelStr); 
// Output: 👉 "Prgrmmrs Prtl"

You can choose any of the three methods to remove vowels from a string in JavaScript. Each method produces the same result.

Which method you choose is just a matter of personal preference.

That’s all for the day. Happy Coding.