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>`;
}