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.
Leave a Reply