如何检查特定字母的输入值及其计数

aelbi1ox  于 2021-09-23  发布在  Java
关注(0)|答案(4)|浏览(202)

我想检查元音字母的输入值,然后计算其中的元音数量。
我只知道如何检查元音的输入,我发现很难知道元音的数量,我想能够写:“这篇文章包含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>
waxmsbnn

waxmsbnn1#

正则表达式可以匹配元音,然后可以检查匹配数。

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>
l5tcr1uw

l5tcr1uw2#

字符串在js中是可编辑的,因此您可以使用spread操作符获取字符数组并检查它是否为 vowel 或者如果它在 vowel 使用includes方法的数组

//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>
ars1skjm

ars1skjm3#

其他一些帖子展示了如何缩短代码以实现这一目标。如果你想保持你所写的风格,比如使用 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);
fgw7neuy

fgw7neuy4#

检查这个

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>

相关问题