How to Count Vowels in a String Using JavaScript

We can count the vowels in a String in JavaScript by using the JavaScript match() method, the length property, and a regex expression.

someString.match(/[aeiou]/gi).length;

Not that the formula above works great as long as there is a vowel in the string. However, if there is no vowel in the string, the expressions will return an error. This is because someString.match(/[aeiou]/gi) will return null if there are no vowels in the string, and you cannot use the length property of a null value.

To make sure our code always works, we can simply add an if-else statement to check this.

var allVowels = string1.match(/[aeiou]/gi);
if( allVowels != null ){
  var numberOfVowels = allVowels.length;
} else {
  var numberOfVowels = 0;  
}

Let’s see this in action with the following example.

var string1 = "How many vowels in this sentence?";
var allVowels = string1.match(/[aeiou]/gi);
if( allVowels != null ){
  var numberOfVowels = allVowels.length;
} else {
  var numberOfVowels = 0;  
}

console.log(numberOfVowels);

#Output
9

When working with strings, it can be useful to know how many vowels appear inside a string.

In JavaScript, we can easily count the vowels in a string by using the match() method, the length property, and a regex expression as seen in the formula above.

Counting the Number of Times Each Vowel Appears in a String Using JavaScript

The example above is useful if you want to get the total number of vowels in a string. We can also use JavaScript to count how many times each vowel appears in a string.

To do this, we will simply use our formula from above, but instead of having all of the vowels counted at once, we will do a regex expression for each vowel.

First, we will set up some HTML that will let a user enter a string. Then we will use a function to count the number of times each vowel appears in the String.

Here is the HTML:

<div id="div1">
  <label for="string1">Enter a String:</label>
  <input type="text" id="string1" name="string1">
  <div id="click-me" onclick="findVowels()">Find Vowels</div>
  <b><div id="userString"></div></b>
  <div id="results">Number of Vowels: <b><span id="numVowels"></span></b></div>
  <div id="results2">Number of times <b>a</b> appears in the String: <span id="vowelA"></span></div>
  <div id="results3">Number of times <b>e</b> appears in the String: <span id="vowelE"></span></div>
  <div id="results4">Number of times <b>i</b> appears in the String: <span id="vowelI"></span></div>
  <div id="results5">Number of times <b>o</b> appears in the String: <span id="vowelO"></span></div>
  <div id="results6">Number of times <b>u</b> appears in the String: <span id="vowelU"></span></div>
</div>

Below is a function that will get the count of how many times each vowel appears in a given string. We will then post the results using the textContent property.

function findVowels(){
  //Get the string the user has entered
  var string = document.getElementById("string1").value;

  //Count how many vowels are in the string
  var count = string.match(/[aeiou]/gi);
  if( count != null ){
    count = count.length;
  } else {
    count = 0;  
  }

  //Use our formula to get number of occurrences of each vowel
  var vowelA = string.match(/a/gi);
  if( vowelA != null ){
    vowelA = vowelA.length;
  } else {
    vowelA = 0;  
  }
  var vowelE = string.match(/e/gi);
  if( vowelE != null ){
    vowelE = vowelE.length;
  } else {
    vowelE = 0;  
  }
  var vowelI = string.match(/i/gi);
  if( vowelI != null ){
    vowelI = vowelI.length;
  } else {
    vowelI = 0;  
  }
  var vowelO = string.match(/o/gi);
  if( vowelO != null ){
    vowelO = vowelO.length;
  } else {
    vowelO = 0;  
  }
  var vowelU = string.match(/u/gi);
  if( vowelU != null ){
    vowelU = vowelU.length;
  } else {
    vowelU = 0;  
  }

  //Post vowels for user to see
  document.getElementById("userString").textContent = string;
  document.getElementById("numVowels").textContent = count;
  document.getElementById("vowelA").textContent = vowelA;
  document.getElementById("vowelE").textContent = vowelE;
  document.getElementById("vowelI").textContent = vowelI;
  document.getElementById("vowelO").textContent = vowelO;
  document.getElementById("vowelU").textContent = vowelU;
};

The final code and output for counting the number of times each vowel appears in a String is below:

Code Output:

Full Code:

<div id="div1">
  <label for="string1">Enter a String:</label>
  <input type="text" id="string1" name="string1">
  <div id="click-me" onclick="findVowels()">Find Vowels</div>
  <b><div id="userString"></div></b>
  <div id="results">Number of Vowels: <b><span id="numVowels"></span></b></div>
  <div id="results2">Number of times <b>a</b> appears in the String: <span id="vowelA"></span></div>
  <div id="results3">Number of times <b>e</b> appears in the String: <span id="vowelE"></span></div>
  <div id="results4">Number of times <b>i</b> appears in the String: <span id="vowelI"></span></div>
  <div id="results5">Number of times <b>o</b> appears in the String: <span id="vowelO"></span></div>
  <div id="results6">Number of times <b>u</b> appears in the String: <span id="vowelU"></span></div>
</div>

<script>

function findVowels(){
  var string = document.getElementById("string1").value;

  var count = string.match(/[aeiou]/gi);
  if( count != null ){
    count = count.length;
  } else {
    count = 0;  
  }
  var vowelA = string.match(/a/gi);
  if( vowelA != null ){
    vowelA = vowelA.length;
  } else {
    vowelA = 0;  
  }
  var vowelE = string.match(/e/gi);
  if( vowelE != null ){
    vowelE = vowelE.length;
  } else {
    vowelE = 0;  
  }
  var vowelI = string.match(/i/gi);
  if( vowelI != null ){
    vowelI = vowelI.length;
  } else {
    vowelI = 0;  
  }
  var vowelO = string.match(/o/gi);
  if( vowelO != null ){
    vowelO = vowelO.length;
  } else {
    vowelO = 0;  
  }
  var vowelU = string.match(/u/gi);
  if( vowelU != null ){
    vowelU = vowelU.length;
  } else {
    vowelU = 0;  
  }

  document.getElementById("userString").textContent = string;
  document.getElementById("numVowels").textContent = count;
  document.getElementById("vowelA").textContent = vowelA;
  document.getElementById("vowelE").textContent = vowelE;
  document.getElementById("vowelI").textContent = vowelI;
  document.getElementById("vowelO").textContent = vowelO;
  document.getElementById("vowelU").textContent = vowelU;
};

</script>

Count Vowels in a String Using a For Loop

We can also easily count how many vowels are in a String using a loop and counting the number of vowels we find in the String.

var string1 = "How many vowels in this sentence?";
function countVowels(string){
  var theString = string.toLowerCase();
  var letter;
  var vowels = "aeiou";
  var count = 0;
  for ( var i = 0; i < theString.length; i++ ){
    letter = theString.charAt(i);
    if (vowels.indexOf(letter) > -1){
      count = count + 1;
    };
  };
  return count;
};

var numOfVowels = countVowels(string1);

The result of the above example (numOfVowels) would return 9, as there are 9 vowels in the sentence, “How many vowels in this sentence?”.

Hopefully this article has been useful for you to learn how to count Vowels in a String using JavaScript.