Удаление всего содержимого между <style> тегами внутри текстового поля с помощью JQuery

Question

Я работаю над счетчиком слов JQuery, который показывает, сколько слов пользователь набрал в текстовое поле по мере их поступления. Эта часть в порядке. Моя проблема заключается в том, что пользователи могут вставлять HTML в свои сообщения, чтобы стилизовать его по своему усмотрению (post templates/tables/etc). Мне удалось выяснить, как удалить html-теги из подсчета счетчика слов, но моя проблема заключается в том, как обрабатывать теги.

Например, кто-то может вставить пост так:

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

Слово счетчик должен рассчитывать только 4 слова (в четырех текстовых), но вместо этого, он также будет рассчитывать .speech, цвет, .container , а также ширину.

Вот код, который я придумал до сих пор: http://jsbin.com/aneray/85/edit

Любая помощь или предложения будут высоко оценены, спасибо!

Answer 1

Я использовал div для установки текста и удаления всего, что не требуется для слова/символа.

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 the text, ignore the tags 

    var words = txtVal.trim().replace(/\s+/gi, ' ').split(' ').length; 

    var chars = $.trim(txtVal).length; //trim any additional spaces, remove $.trim to include white spaces and additional space from tag line breaks 

    if(chars===0){words=0;} 
    $('#counter').html('<br>'+words+' words and '+ chars +' characters'); 
} 
count(); 

$('textarea').on('keyup propertychange paste', function(){ 
    count(); 
});