Question

I am wondering how I would remove the vowels from a word on a button click?

Here is what I am trying to do – http://www.marcia.bnmla.com/~marcia/project0.html

I need to use jQuery to remove the vowels in the second box so it displays only consonants when you click the button. I have it where it displays “MRC” as text when the button is clicked and I need to redo it using string manipulation so I can change the word to anything in my code and it will remove the vowels in that word. I am obviously new at this. Please help me!

Here is my code:

<div id="marcia_box">
        <p id="marciatext">marcia</p>
        <div id="marcia_boxBtn"><button id="marciaBtn">Marcia</button></div>
</div>

$("#marciaBtn").click(function() {
    $("#marcia_box").css("background-color","#999");
    $("#marciatext").html('mrc');
});

Answer 1

jQuery allows you to pass a function to .html, which should return a new HTML string. jQuery will pass the old HTML, so you can do something like this:

$("#marciatext").html(function(i, current) {
  return current.replace(/[aeiou]/g, "");
});