计算某些字符串值的更好方法？

Question

I was hoping to get some advice on a script I'm playing with. I'm working on a program that counts numerous elements of a sentence and right now I'm just counting the vowels in total. I have a working script but I was wondering, is there a better way to do this than what I have so far?

HTML

<div id="test">
    <input type="text" />
    <p></p>
    <p></p>
</div>

JS

$(document).ready(function(){
    var key;
    var vowels;
    $("#test input[type='text']").on("keydown", function(e){
        key = e.target.value;
        $("#test p:nth-of-type(1)").text(key);
    })
    $(this).on("keydown", function(e){
        vowels = [];
        if(e.keyCode == 13){
            console.log($("#test input[type='text']").val());
            for(var i = 0; i < $("#test input[type='text']").val().length; i++){
                switch($("#test input[type='text']").val()[i]){
                    case "a":
                        vowels.push($("#test input[type='text']").val()[i]);
                        break;
                    case "e":
                        vowels.push($("#test input[type='text']").val()[i]);
                        break;
                    case "i":
                        vowels.push($("#test input[type='text']").val()[i]);
                        break;
                    case "o":
                        vowels.push($("#test input[type='text']").val()[i]);
                        break;
                    case "u":
                        vowels.push($("#test input[type='text']").val()[i]);
                        break;
                }
            }
            $("#test p:nth-of-type(2)").text("There are " +vowels.length +" vowels.");
        }
    })
})

Here's the Working Pen .

Answer 1

You can optimize for simplicity and speed using a temporary variable:

 if(e.keyCode == 13){
            var tmp=$("#test input[type='text']").val();
            console.log(tmp);
            for(var i = 0; i < tmp.length; i++){
                switch(tmp[i]){
                    case "a":
                        vowels.push("a");
                        break;
                    case "e":
                        vowels.push("e");
                        break;
                    case "i":
                        vowels.push("i");
                        break;
                    case "o":
                        vowels.push("o");
                        break;
                    case "u":
                        vowels.push("u");
                        break;
                }
            }

because parsing html countless times was slow and inflated code lines made it harder to see other problems.

Instead of

 $(this).on("keydown", ...

you could check for "keyup" since it gives updated content with it.

Answer 2

You can actually simplify your code a lot more and remove the switch statement completely.

In this approach, I use .match(/[aeiou]/gi) to generate an array of vowels. The g flag will match all occurrences, and the i flag will ignore the character's case.

Updated Example

$('#test :input').on('input keydown', function(e) {
  var input = this.value,
      match = input.match(/[aeiou]/gi),
      count = match ? match.length : 0;

  $('#test p').eq(0).text(input);

  if (e.keyCode === 13) {
    $('#test p').eq(1).text('There are ' + count + ' vowels.');
  }
});

Answer 3

if(e.keyCode == 13){
    var tmp=$("#test input[type='text']").val();
    for(var i = 0; i < tmp).length; i++){
        if(["a", "e", "i", "o", "u"].indexOf(tmp[i]))
        vowels.push(tmp[i]);
    }
}