• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / JavaScript / How to Count Vowels in a String Using JavaScript

How to Count Vowels in a String Using JavaScript

February 9, 2022 Leave a Comment

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:


Find Vowels

Number of Vowels:
Number of times a appears in the String:
Number of times e appears in the String:
Number of times i appears in the String:
Number of times o appears in the String:
Number of times u appears in the String:

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.

Other Articles You'll Also Like:

  • 1.  Set Hidden Field Value In JavaScript
  • 2.  Remove Empty Strings from an Array in JavaScript
  • 3.  Using JavaScript to Check if Variable is a Number
  • 4.  JavaScript indexOf – Get the position of a value within a string
  • 5.  Swapping Images in JavaScript
  • 6.  Using JavaScript to Redirect After 5 Seconds
  • 7.  Using JavaScript to get Textarea Value
  • 8.  Using JavaScript to Replace a Space with an Underscore
  • 9.  How to Clear a Textarea Field In JavaScript
  • 10.  Using JavaScript to Add Leading Zeros

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy