[英]How to check an input value for specific letters and their count
我想檢查元音字母的輸入值,然后計算其中的元音數。
我只知道如何檢查元音的輸入,我發現很難知道元音的數量,我希望能夠寫出:“段落包含 6 個元音”。
請查看代碼並提供幫助。
//Selecting document element const voutText = document.querySelector('#vText'); const voutBtn = document.querySelector('#vSubBtn'); const voutBox = document.querySelector('#vOutput'); const vowelCount = 0; const voutApp = () => { const vowel = ['A','E', 'I', 'O', 'U']; const voutTextView = voutText.value.toUpperCase(); for (i = 0; i < voutText.value.length; i++) { voutBox.innerHTML = i; } if (voutTextView.includes('A')) { alert("Yey! we found vowels, your text contains the vowel sound 'A'"); } else if (voutTextView.includes('E')) { alert("Yey! we found vowels, Your text contains the vowel sound 'E'"); } else if (voutTextView.includes('I')) { alert("Yey! we found vowels, Your text contains the vowel sound 'I'"); } else if (voutTextView.includes('O')) { alert("Yey! we found vowels, Your text contains the vowel sound 'O'"); } else if (voutTextView.includes('U')) { alert("Yey! we found vowels, Your text contains the vowel sound 'U'"); } else { voutBox.innerHTML = 'Your text contains no vowel sound'; } voutText.value = ''; voutBox.innerHTML = `Your text ${voutTextView} contains vowel sounds`;//I have to figure out how to get the vowel counts EG: Your text (Input Value) contains 6 vowels. } voutBtn.addEventListener('click', voutApp);
<div id="vHead"> <h1>VOUT</h1> <p>Check a word for vowel sounds</p> <input id="vText" type="text" placeholder="Eg: Victor" value="Victor" required> <input id="vSubBtn" type="button" value="Check"> </div> <div id="vOutput"></div>
正則表達式可以匹配元音,然后可以檢查匹配的數量。
const input = document.querySelector('#vText'); const button = document.querySelector('#vSubBtn'); const output = document.querySelector('#vOutput'); button.onclick = () => { const inputText = input.value; const vowelCount = (inputText.match(/[aeiou]/gi) ?? []).length; output.textContent = `Your text ${inputText} contains ${vowelCount} vowel sounds`; }
<div id="vHead"> <h1>VOUT</h1> <p>Check a word for vowel sounds</p> <input id="vText" type="text" placeholder="Eg: Victor" value="Victor" required> <input id="vSubBtn" type="button" value="Check"> </div> <div id="vOutput"></div>
其他一些帖子展示了如何縮短代碼以實現此目標。 如果你想保持你所寫的風格,比如使用for
循環和alert
s 等,那么你可以這樣做:
//Selecting document element
const voutText = document.querySelector('#vText');
const voutBtn = document.querySelector('#vSubBtn');
const voutBox = document.querySelector('#vOutput');
const voutApp = () => {
const vowel = ['A', 'E', 'I', 'O', 'U'];
const voutTextView = voutText.value.toUpperCase();
let vowelCount = 0;
for (i = 0; i < voutTextView.length; i++) {
if (vowel.includes(voutTextView[i])) {
// This would alert whenever it finds a vowel - even multiple of the same
alert("Yey! we found vowels, your text contains the vowel sound " + voutTextView[i]);
vowelCount++;
}
}
if (vowelCount > 0) {
voutBox.innerHTML = "The passage contains " + vowelCount + " vowel sounds";
} else {
voutBox.innerHTML = "Your text contains no vowel sound";
}
}
voutBtn.addEventListener('click', voutApp);
字符串是可迭代的JS,所以你可以使用傳播接線員給人物和檢查的數組,如果它是一個vowel
與否,如果它是在vowel
陣列使用包括方法
//Selecting document element const voutText = document.querySelector('#vText'); const voutBtn = document.querySelector('#vSubBtn'); const voutBox = document.querySelector('#vOutput'); let vowelCount = 0; const voutApp = () => { const text = voutText.value; const vowel = ['A', 'E', 'I', 'O', 'U']; [...text].forEach(ch => vowel.includes(ch.toUpperCase()) ? vowelCount++ : "") voutBox.innerHTML = `Your text ${vowelCount} contains vowel sounds`; //I have to figure out how to get the vowel counts EG: Your text (Input Value) contains 6 vowels. } voutBtn.addEventListener('click', voutApp);
<div id="vHead"> <h1>VOUT</h1> <p>Check a word for vowel sounds</p> <input id="vText" type="text" placeholder="Eg: Victor" required> <input id="vSubBtn" type="button" value="Check"> </div> <div id="vOutput"></div>
檢查這個
function voutApp(){ const voutText = document.getElementById('vText'); const voutBox = document.getElementById('vOutput'); const vowel = ['A','E', 'I', 'O', 'U']; let vowelCount = 0; let val = voutText.value; let msg1 = 'Yey! we found'; let vfound = []; for (let i=0; i<val.length; i++) { let curChar = val[i].toUpperCase(); if( vowel.indexOf(curChar) !== -1 ){ vowelCount += 1; vfound.push(curChar); } } if( vowelCount > 0 ){ voutBox.innerHTML = msg1+' '+vowelCount+' vowels. your text contains the vowel sound '+vfound; }else{ voutBox.innerHTML = 'Your text contains no vowel sound'; } }
<div id="vHead"> <h1>VOUT</h1> <p>Check a word for vowel sounds</p> <input id="vText" type="text" placeholder="Eg: Victor" value="Victor" required> <input id="vSubBtn" type="button" value="Check" onclick="voutApp()"> </div> <div id="vOutput"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.