單擊字符串時，計算每個單獨的元音

Question

爲輸入句子（字符串）的html文件寫入一些js。當我點擊一個按鈕時，它會輸出每個元音的數量，排除y並且不注意標點符號。我不能使用var，所以我試圖讓這個工作使用let。我相信我在這裏正確的道路上，從元音a開始，但如果句子不包含a，我會得到一個錯誤。我想不出接下來要做什麼。有什麼想法嗎？

'use strict'; 
 

 
let vButton = document.querySelectorAll('#vowels'); 
 
vButton.forEach(function(blip) { 
 
    blip.addEventListener('click', function(evt) { 
 
    evt.preventDefault(); 
 
    console.log('click'); 
 

 
    let vowelString = document.getElementById('roboInput'), 
 
     sentence = vowelString.value; 
 
    if (sentence !== '') { 
 
     let aMatches = sentence.match(/a/gi).length; 
 
     alert("a - " + aMatches); 
 
    } 
 
    vowelString.value = ''; 
 

 
    }); 
 
});

a { 
 
    cursor: pointer; 
 
} 
 

 
.well-robot { 
 
    min-height: 340px; 
 
} 
 

 
.input-robot { 
 
    width: 100%; 
 
    min-height: 100px; 
 
} 
 

 
.output-robot { 
 
    border: 1px solid #000000; 
 
    min-height: 150px; 
 
    margin-top: 10px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 
 
<div class="container"> 
 
    <div class="alert alert-info"> 
 
    Hello! I'm a smart robot. I can do many interesting things. Type something below and click a button to watch me work! 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-4"> 
 
     <img src="./robot.gif"> 
 
    </div> 
 
    <div class="col-sm-8 well well-robot"> 
 
     <textarea id="roboInput" placeholder="Input something here!" class="input-robot"></textarea> 
 
     <div class="btn-group btn-group-justified"> 
 
     <a class="btn btn-default" id="vowels">Count Vowels</a> 
 
     <a class="btn btn-default" id="anagrams">Count Anagrams</a> 
 
     <a class="btn btn-default" id="distance">Word Distance</a> 
 
     </div> 
 
     <div id="robotResult" class="output-robot"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

如果沒有匹配的正則表達式，.match()回報null，不是一個空數組，所以你不能得到的長度。你需要檢查。

let matches = sentence.match(/a/gi); 
let matchLength = matches ? matches.length : 0; 
alert('a - ' + matchLength); 

Answer 2

如果我正確理解你的問題，你可能會想是這樣的：

'use strict'; 
 

 
let vButton = document.querySelectorAll('#vowels'); 
 
vButton.forEach(function(blip) { 
 
    blip.addEventListener('click', function(evt) { 
 
    evt.preventDefault(); 
 
    //console.log('click'); 
 

 
    let vowelString = document.getElementById('roboInput'), 
 
     sentence = vowelString.value; 
 
    if (sentence) { 
 
     let result = {a: 0, e: 0, i: 0, o: 0, u: 0 }; 
 
     for(var i = 0, l = sentence.length; i < l; i++) { 
 
     if(result.hasOwnProperty(sentence[i])) 
 
      result[sentence[i]]++; 
 
     } 
 
     console.log(result); 
 
    } 
 
    
 
    vowelString.value = ''; 
 

 
    }); 
 
});

a { 
 
    cursor: pointer; 
 
} 
 

 
.well-robot { 
 
    min-height: 340px; 
 
} 
 

 
.input-robot { 
 
    width: 100%; 
 
    min-height: 100px; 
 
} 
 

 
.output-robot { 
 
    border: 1px solid #000000; 
 
    min-height: 150px; 
 
    margin-top: 10px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 
 
<div class="container"> 
 
    <div class="alert alert-info"> 
 
    Hello! I'm a smart robot. I can do many interesting things. Type something below and click a button to watch me work! 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-4"> 
 
     <img src="./robot.gif"> 
 
    </div> 
 
    <div class="col-sm-8 well well-robot"> 
 
     <textarea id="roboInput" placeholder="Input something here!" class="input-robot"></textarea> 
 
     <div class="btn-group btn-group-justified"> 
 
     <a class="btn btn-default" id="vowels">Count Vowels</a> 
 
     <a class="btn btn-default" id="anagrams">Count Anagrams</a> 
 
     <a class="btn btn-default" id="distance">Word Distance</a> 
 
     </div> 
 
     <div id="robotResult" class="output-robot"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>