我想检查元音字母的输入值,然后计算其中的元音数。
我只知道如何检查元音的输入,我发现很难知道元音的数量,我希望能够写出:“这篇文章包含 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>
答案 0 :(得分:2)
正则表达式可以匹配元音,然后可以查看匹配的次数。
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>
答案 1 :(得分:1)
字符串在 JS 中是可迭代的,因此您可以使用扩展运算符来获取字符数组并使用 {{ 3}} 方法
vowel
vowel
答案 2 :(得分:1)
其他一些帖子展示了如何缩短代码以实现这一目标。如果您想保持所写内容的风格,例如使用 for
循环和 alert
等,那么您可以这样做:
//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);
答案 3 :(得分:1)
检查这个
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>