Word counter using jQuery

HTML CODE


<div id="border">
 <textarea id='text'></textarea>
 </div>
 <button id="count">Count</button>
 <div id="result">
 Words: <span id="wordCount">0</span><br/>
 Total Characters(including trails): <span id="totalChars">0</span><br/>
 Characters (excluding trails): <span id="charCount">0</span><br/>
 Characters (excluding all spaces): <span id="charCountNoSpace">0</span>
 </div>

JAVASCRIPT CODE


counter = function() {
 var value = $('#text').val();

 if (value.length == 0) {
 $('#wordCount').html(0);
 $('#totalChars').html(0);
 $('#charCount').html(0);
 $('#charCountNoSpace').html(0);
 return;
 }

 var regex = /\s+/gi;
 var wordCount = value.trim().replace(regex, ' ').split(' ').length;
 var totalChars = value.length;
 var charCount = value.trim().length;
 var charCountNoSpace = value.replace(regex, '').length;

 $('#wordCount').html(wordCount);
 $('#totalChars').html(totalChars);
 $('#charCount').html(charCount);
 $('#charCountNoSpace').html(charCountNoSpace);
};

$(document).ready(function() {
 $('#count').click(counter);
 $('#text').change(counter);
 $('#text').keydown(counter);
 $('#text').keypress(counter);
 $('#text').keyup(counter);
 $('#text').blur(counter);
 $('#text').focus(counter);
});


DEMO 

Check this link http://jsfiddle.net/vetri/szfgmekm/1/

Tagged as: