JSFiddle - React, Tailwind, and code Playground

HTML

<div style="text-align: center;">
<h1> Vowel Counter </h1>
Please enter text for your vowel count:
<br>
<textarea id="text" rows="10" style="width: 100%;">Alice was not a bit hurt, and she jumped up on to her feet in a moment: she looked up, but it was all dark overhead; before her was another long passage, and the White Rabbit was still in sight, hurrying down it. There was not a moment to be lost: away went Alice like the wind, and was just in time to hear it say, as it turned a orner, "Oh my ears and whiskers, how late it's getting!" She was close behind it when she turned the corner, but the Rabbit was no longer to be seen: she found herself in a long, low hall, which was lit up by a row of lamps hanging from the roof</textarea>
<br>
<button onclick="countVowels();">Count Vowels</button>
<p id="result"></p>

JavaScript

function countVowels() {

    var text = document.getElementById("text").value;

    var arrayOfLetters = text.split("");

    // These are the counters for the program to find the vowels.
    var countA = text.match(/[Aa]/g).length;
    var countE = text.match(/[Ee]/g).length;
    var countI = text.match(/[Ii]/g).length;
    var countO = text.match(/[Oo]/g).length;
    var countU = text.match(/[Uu]/g).length;
    var countComma = text.match(/[,.!": ;?)(]/g).length;

    var bold = "<strong>";
    var vowels = new Array ();
    vowels [0] = {"vowel" : "A", "count" : countA};
    vowels [1] = {"vowel" : "E", "count" : countE};
    vowels [2] = {"vowel" : "I", "count" : countI};
    vowels [3] = {"vowel" : "O", "count" : countO};
    vowels [4] = {"vowel" : "U", "count" : countU};

    var maxCount = Math.max.apply(Math, vowels.map(function(o) {
        return o.count;
    }));

    for (var i = 0; i < vowels.length; i++) {
        document.getElementById("result").innerHTML += (vowels[i].count == maxCount? "<B>" : "") + vowels[i].vowel + "'s: " + vowels[i].count + "<br />";
    }
}