How to filter vowels from a string in JavaScript?

 

I remember my early days as a JavaScript newbie, fumbling through strings and arrays, trying to solve what seemed like trivial problems. One task that tripped me up was filtering vowels from a string. It’s a classic coding challenge—simple on the surface but packed with opportunities to flex your problem-solving muscles. Whether you’re prepping for a technical interview or just sharpening your skills, knowing how to filter vowels or check for their presence in a string is a handy trick. Let’s dive into how to tackle these tasks in JavaScript with a conversational yet confident approach, and I’ll throw in some stats to keep things grounded.

 

Why Vowels?

Before we get to the code, let’s set the stage. String manipulation is a cornerstone of programming. According to a 2023 Stack Overflow Developer Survey, JavaScript remains the most commonly used programming language for the 11th year running, with 63.61% of developers wielding it. Whether you’re building a web app or solving algorithmic puzzles, you’ll likely need to manipulate strings at some point. Filtering vowels or checking for their presence might come up in tasks like text analysis, word games, or even natural language processing.

Vowels (a, e, i, o, u, and sometimes y) are the glue of language, and isolating them programmatically can teach you a lot about loops, regex, and array methods. Let’s break down two key tasks: filtering vowels from a string and checking if a string contains vowels.

How to filter vowels from a string in JavaScript?

Let’s start with a simple and readable way to extract vowels from a string using a classic for...of loop. This approach is perfect if you’re just starting out with JavaScript or want your code to be easy to read and maintain.

 The Problem:

You’re given a string like "hello world" and your goal is to extract only the vowels from it — in this case, you'd expect "eoo".

function filterVowels(str) {
  const vowels = ['a', 'e', 'i', 'o', 'u']; // All lowercase vowels
  let result = ''; // This will store the vowels we find

  // Convert the input string to lowercase so we can match easily
  for (let char of str.toLowerCase()) {
    // Check if the current character is a vowel
    if (vowels.includes(char)) {
      result += char; // If it is, add it to the result
    }
  }

  return result; // Return the final string of vowels
}

console.log(filterVowels('hello world')); // Output: 'eoo'

How It Works:

Let’s break it down line by line:

1. const vowels = ['a', 'e', 'i', 'o', 'u'];
   We define an array of vowels to check against. This helps us identify which characters to extract.
2. let result = '';
   We’ll collect vowels in this string as we find them.
3. for (let char of str.toLowerCase())
   We loop through each character of the string after converting it to lowercase (to avoid case sensitivity issues).
4. if (vowels.includes(char))
   This condition checks if the current character is one of our vowels.
5. result += char;
   If it is, we append it to the result string.
6. return result;
   Once the loop finishes, we return the string that now contains only the vowels.

Output:

filterVowels('hello world'); // returns 'eoo'

Approach 2: The Regex Method

If you’re the type who loves clean one-liners and elegant solutions, regular expressions (a.k.a. regex) are your best friend.

Let’s revisit our task:
Extract the vowels from "hello world" — you want to get "eoo" as your output.

This time, instead of looping through the string character by character, we’ll let regex do the heavy lifting.

function filterVowels(str) {
  return str.toLowerCase().match(/[aeiou]/g)?.join('') || '';
}

console.log(filterVowels('hello world')); // Output: 'eoo'

How It Works:

Let’s dissect the magic behind this one-liner:

1. str.toLowerCase()
   Just like in the loop method, we convert the string to lowercase to simplify matching — this way, we don’t need to worry about uppercase vowels like A or O.
2. match(/[aeiou]/g)
   This is the heart of the solution.
• /[aeiou]/ is a regex pattern that matches any single vowel.
• The g flag (global) tells JavaScript to find all vowels in the string, not just the first one.
• match() returns an array of all matching characters. For "hello world", it returns: ['e', 'o', 'o'].
3. ?.join('')
   The optional chaining operator (?.) ensures we don’t try to join null. If vowels are found, it joins the array into a string: 'eoo'.
4. "|| ''
   If no vowels are found, match() returns null. This part ensures we return an empty string instead of crashing or showing null.

Output:

filterVowels('hello world'); // returns 'eoo'
filterVowels('rhythm');      // returns ''

How to check if string contains vowels in JavaScript?

Sometimes, instead of extracting vowels, you just want to know if a string contains any vowels at all. This can be useful in situations like validating user input, filtering out gibberish, or preprocessing text for NLP.

Let’s explore two simple yet effective ways to check for vowels in JavaScript.

Approach 1: The includes() Method — Clear and Efficient

This method is perfect if you want clarity and reliability. It splits the string into individual characters and uses the some() method to check if any of those characters are vowels.

function hasVowels(str) {
  const vowels = ['a', 'e', 'i', 'o', 'u']; // Set of vowels
  return str.toLowerCase().split('').some(char => vowels.includes(char));
}

console.log(hasVowels('hello'));   // Output: true
console.log(hasVowels('rhythm'));  // Output: false

How It Works:

• str.toLowerCase()
  Ensures case-insensitive comparison by converting the entire string to lowercase.
• split('')
  Turns the string into an array of characters.
• some()
  Checks if at least one character in the array is present in our list of vowels using includes().

The moment it finds a vowel, it stops checking — making it efficient, especially with longer strings.

Approach 2: The Regex Method

Regex shines again for brevity:

function hasVowels(str) {

  return /[aeiou]/i.test(str);

}


console.log(hasVowels('hello')); // Output: true

console.log(hasVowels('rhythm')); // Output: false

The /[aeiou]/i pattern matches any vowel, and the i flag makes it case-insensitive. test() returns true if there’s a match. It’s concise and performant, perfect for production code.

Practical Tips and Edge Cases

• Case Sensitivity: Always convert strings to lowercase unless the problem specifies otherwise.
• Edge Cases: Handle empty strings or non-string inputs. Add checks like if (!str) return ''; for robustness.
• Performance: For small strings, both loop and regex methods are fine. For large datasets, loops may edge out regex slightly in speed.
• The ‘y’ Debate: Is ‘y’ a vowel? In words like “rhythm,” it can be. Adjust your vowel array or regex if needed.

Conclusion

String manipulation sisn’t just academic—it’s practical. From building search features to validating forms, these skills are evergreen. Plus, solving these problems hones your ability to think logically and write clean code, qualities that 89% of hiring managers prioritize, per a 2024 LinkedIn report.

So, what’s your go-to method for handling vowels in JavaScript—loops, regex, or something else entirely? Drop your thoughts in the comments and let’s geek out together!