charAt() JavaScript – Getting the Index Position of a Character

We can use the String charAt() JavaScript method to get the character of a string at a given index. If the given index is not valid, an empty string is returned.

"Text".charAt(0);

This would result in the following output:

T

Some other examples of the charAt() method are below:

var text = "Example text";
var str1 = text.charAt(0);
var str2 = text.charAt(1);
var str3 = text.charAt(7);
var str4 = text.charAt(20);
var str4 = text.charAt(text.length-1);

Which would result in the following:

str1 = E
str2 = x
str3 =
str4 =
str5 = t

The main thing to remember with the JavaScript charAt() method is that the first character starts at index 0, not 1.

Using the charAt() JavaScript Method to Count the Number of Times Each Vowel Appears in a String

We can use the charAt() and other JavaScript methods to count how many times each vowel appears in a string.

To do this, we will loop over the vowels and create an array that will store the count for each of the vowels.

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. It makes use of the indexOf method and the charAt() method. It will then post the results using the textContent property.

function findVowels(){
  var vowelArray = [0,0,0,0,0];
  var letter;
  var vowels = "aeiou";
  var count = 0;
  var vowelIndex;
  var string = document.getElementById("string1").value;
  var theString = string.toLowerCase();
  for ( var i = 0; i < theString.length; i++ ){
    letter = theString.charAt(i);
    if (vowels.indexOf(letter) > -1){
      count = count + 1;
      vowelIndex = vowels.indexOf(letter);
      vowelArray[vowelIndex] += 1;
    };
  }
  document.getElementById("userString").textContent = string;
  document.getElementById("numVowels").textContent = count;
  document.getElementById("vowelA").textContent = vowelArray[0];
  document.getElementById("vowelE").textContent = vowelArray[1];
  document.getElementById("vowelI").textContent = vowelArray[2];
  document.getElementById("vowelO").textContent = vowelArray[3];
  document.getElementById("vowelU").textContent = vowelArray[4];
}

The final code and output for using the charAt() JavaScript method to help count 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 vowelArray = [0,0,0,0,0];
  var letter;
  var vowels = "aeiou";
  var count = 0;
  var vowelIndex;
  var string = document.getElementById("string1").value;
  var theString = string.toLowerCase();
  for ( var i = 0; i < theString.length; i++ ){
    letter = theString.charAt(i);
    if (vowels.indexOf(letter) > -1){
      count = count + 1;
      vowelIndex = vowels.indexOf(letter);
      vowelArray[vowelIndex] += 1;
    };
  }
  document.getElementById("userString").textContent = string;
  document.getElementById("numVowels").textContent = count;
  document.getElementById("vowelA").textContent = vowelArray[0];
  document.getElementById("vowelE").textContent = vowelArray[1];
  document.getElementById("vowelI").textContent = vowelArray[2];
  document.getElementById("vowelO").textContent = vowelArray[3];
  document.getElementById("vowelU").textContent = vowelArray[4];
}

</script>

Hopefully this article has been useful for you to learn how the String charAt() JavaScript method works.