Count words and characters using jQuery

  •  
  •  
  •  
  •  
  •  
  •  

A simple, word and character counter for HTML textarea and other input fields. The following simple useful HTML and jQuery code will let you help to count words and characters with and without white spaces of a string. In this tutorial hardly I used 20 lines of jQuery code which returns you the desired goal.

Count words and characters using jQuery

HTML code — Count words and characters using jQuery

<div class="contentDiv">
  <div class="div-textarea"><textarea name="message" id="message" rows="5" cols="40"></textarea></div>
  <div class="div-counters">
    <label class="word-counter"><span>0</span> Words</label> 
    <label class="space-counter"><span>0</span> Blank Spaces</label> 
    <label class="char-counter1"><span>0</span> Characters with spaces</label>
    <label class="char-counter2"><span>0</span> Characters without spaces</label> 
  </div>
</div><!-- end of .contentDiv -->

Create a HTML file “index.php” in the root folder and write the above contents in it. The above HTML code contains a textarea and four consecutive label.

jQuery code — Count words and characters using jQuery

$(document).ready(function() {
  $(document).on("keyup keypress", "#message", function() {
    wordAndCharacterCounter();													   
  });
});

wordAndCharacterCounter = function() {
  var message = $("#message").val();
  var regex = /\s+/gi;
  var total_words = message.trim().replace(regex, ' ').split(' ').length;
  var chars_with_spaces = message.trim().length;	
  var chars_with_no_spaces = message.replace(regex, '').length;
  
  $(".word-counter span").html(total_words);
  $(".space-counter span").html(chars_with_spaces - chars_with_no_spaces);
  $(".char-counter1 span").html(chars_with_spaces);
  $(".char-counter2 span").html(chars_with_no_spaces);
};

Create a jQuery file “count.js” inside the js folder and write the above contents in it. Whenever user type a character within the textarea the $(document).on(“keyup”, “#message”, function() {…}) will execute and call the wordAndCharacterCounter() function.

var message = $("#message").val();
var regex = /\s+/gi;

The message variable holds the value of the textarea. The javascript regular expression searches all single blank spaces from the content. “\s” means single whitespace (space, tab, newline, etc). “+” means one or more previous character, in this case, white space. “g” means global, so that it finds all occurrences, not just the first. “i” means we have set it to “ignore case”.

var total_words = message.trim().replace(regex, ' ').split(' ').length;
var chars_with_spaces = message.trim().length;	
var chars_with_no_spaces = message.replace(regex, '').length;

The first line splits the string into an array of substrings and returns the length of the new array. The second line removes white spaces from both ends and returns the length of the whole string. The third line returns the length of the string excluding any white spaces.

Please download the complete source code from the download link below and please  like and share the tutorial link to others.

About Mitrajit

Leave a Reply

Your email address will not be published. Required fields are marked *

Prove you are a human *