How to Get Vowels from a string

How to Get Vowels from a string

Using the match method you can select the RegExp results and create an array of items from the results.  In this case the regular express will return all matches of “aeiou” both upper and lower case and global using the flags gi

Select the page elements 

const output = document.querySelector(‘.output’);

const btn = document.querySelector(‘button’);

const myInput = document.querySelector(‘input’);

Add a click event

btn.addEventListener(‘click’,()=>{

    const lenVal = myInput.value.length;

    counterVowels(myInput.value);

})

Using match in the function output the values into the page.

function counterVowels(val){

    const total = val.length;

    const m = val.match(/[aeiou]/gi);

    console.log(m.length);

    const listVowels = m.join(‘ – ‘);

    output.innerHTML = `<div><b>${val}</b></div>`;

    output.innerHTML += `<div>Total Length ${total}</div>`;

    output.innerHTML += `<div>Vowels Total ${m.length}</div>`;

    output.innerHTML += `<div>Others ${total – m.length}</div>`;

    output.innerHTML += `<div>${listVowels}</div>`;

}

<!DOCTYPE html>

<html>

<head>

   <title>JavaScript</title>

</head>

<body>

   <input type=”text”><button>Check</button>

   <div class=”output”></div>

   <script src=”app1.js”></script>

</body>

</html>

const output = document.querySelector(‘.output’);

const btn = document.querySelector(‘button’);

const myInput = document.querySelector(‘input’);

btn.addEventListener(‘click’,()=>{

   const lenVal = myInput.value.length;

   counterVowels(myInput.value);

})

const str1 = ‘Laurence Svekis’;

const str2 = ‘hello World’;

//console.log(output);

counterVowels(str2);

function counterVowels(val){

   const total = val.length;

   const m = val.match(/[aeiou]/gi);

   console.log(m.length);

   const listVowels = m.join(‘ – ‘);

   output.innerHTML = `<div><b>${val}</b></div>`;

   output.innerHTML += `<div>Total Length ${total}</div>`;

   output.innerHTML += `<div>Vowels Total ${m.length}</div>`;

   output.innerHTML += `<div>Others ${total – m.length}</div>`;

   output.innerHTML += `<div>${listVowels}</div>`;

}