Removing all content between <style> tags inside a textarea with Jquery -

i'm working on jquery word counter show how many words user has typed textbox go. part fine. issue users able insert html posts style please (post templates/tables/etc). managed figure out how remove html tags being counted word counter, problem how handle tags.

for example, insert post this:

<style> .speech {color:#000;font-weight:bold;} .container {width:80%;} </style> <div class="container"> text text text <span class="speech">text</span> </div> 

the word counter should count 4 words (the 4 text's), instead, count .speech, color, .container, , width well.

here code i've come far: http://jsbin.com/aneray/85/edit

any or suggestions appreciated, thanks!

i used div set text , remove not required word/char count.

demo: http://jsbin.com/aneray/88/edit

function count(){    var $t = $('<div />').html($('textarea').val());    $t.find('style').remove(); //remove style content    txtval = $t.text(); //fetch text, ignore tags    var words = txtval.trim().replace(/\s+/gi, ' ').split(' ').length;    var chars = $.trim(txtval).length; //trim additional spaces, remove $.trim include white spaces , additional space tag line breaks    if(chars===0){words=0;}   $('#counter').html('<br>'+words+' words , '+ chars +' characters'); } count();  $('textarea').on('keyup propertychange paste', function(){      count(); });