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/