jQuery plugin: word-counter for textarea

Sorry friends on the way of move to new home I’ve been lost from the blog as I didn’t have internet connection for few last weeks. Now, I’m back and I try to be regular as much as I can. Inspired from the new feature of wordpress 2.6.x which displays word count of each post, I’ve developed jQuery plugin to display word-count of Textarea. Please note that it is word count plugin not character counter.

LIVE DEMO

Jquery plugin: Word-count code

jQuery.fn.wordCount = function(params)
{
   var p =  {
   counterElement:"display_count"
   };
   var total_words;

  if(params) {
      jQuery.extend(p, params);
   }

  //for each keypress function on text areas
  this.keypress(function()
  {
    total_words=this.value.split(/[\s\.\?]+/).length;
    jQuery('#'+p.counterElement).html(total_words);
   });
};

VIEW PLUGIN’S CODE

As you can in the above code, I assume that each words of a paragraph are separated by the either spaces or dots(.) . Please have your suggestion if i can more characters to improve this plugin.

How to use this plugin?

Well, you can guess that a Textarea is needed of whose words are counted and another element like div or span needed to display the word count.

For example, the below HTML code contains Textarea (whose total word is counted) and span (for displaying counted word).

<textarea name="word_count" id="word_count" cols="30" rows="6"></textarea>
Total word Count : <span id="display_count">0</span>

Remember that the id of text area is “word_count” and “display_count“.

Now, let look at the jQuery code for displaying word count of text area , note that we are calling the function wordCount() which we’ve just developed in the plugin of jQuery.

$('#word_count').wordCount();

Note: display_count  is default id of element which is already defined in the plugin if you want to use the different id of elment then you’ve to override the value of variable counterElement which contains the id of element displaying word count.

$('#word_count').wordCount({counterElement:"word_counter"});

DOWNLOAD EXAMPLE CODE

45 thoughts on “jQuery plugin: word-counter for textarea

  1. nice how to, very usefull, but in the article I think you may want to say wordpress 2.6.x right? :)

    best regards

  2. @Davi- Thanks for heads up dude….corrected now…

  3. Another nice tutorial, this is a useful piece of code for any website allowing comments from the public.

    Thanks

  4. azrain

    simple and superb. nice one. this is what i need. thanks.

  5. Asim Sajjad

    This is the nice think, i have used it but i have found little error in it and i hope that you will fix it, the problem is that i have typed “How are you ?” you see there is space before question mark it will give number of words 4 but if i remove the space between word “you” and the question mark (?) the still it will give number of count to 4. which i think is wrong. hope you will fix that problem.

  6. I especially use word counter for counting the no of words of my the Sponsored posts from payperpost and sponsored reviews.

    I think Blogger doesn’t support jquery plugin.If it would have in JavaScript then it wound have become really useful to me.

  7. Roshan dai,

    I am looking for a way to use tinymce with character counter (limit character). I tried with jquery character count also, but didn’t work. Can you give me any idea?

  8. @Deineshd – you can easily use this if you can use javascript, jquery and jquery plugin is just a javascript framework and piece of code of javascript… if you can use javascript then you must be able to use jquery

    @shakeel – javascript code must work with tinymce as it is also built using javascript

    @Asim Sajjad – thanks for reporting the bug, I’ll fix it in the next update of this plugin..

  9. Felix

    Roshan…if you write “la-vida-loca/es@loca” count 1 word. If you write “la.vida.loca,es.loca”, count 4 words. The separator is just a dot or space when they should be (space).,;-@

    Realy good Roshan!!

  10. @felix – thanks very much for your valuable suggestion, I’ll get it fixed in next release…

  11. Asim Sajjad

    Roshan, if i type “hello,how” then it will count 1 which is i think wrong, i think you should handle the comma (,) sign as well hope you will do it in the future release of the plug-in if you like my suggestion :)

  12. @asim – every suggestion is highly appreciated and will be used in the next version…

  13. Asim Sajjad

    when will you give the new version of the word counter plug-in, i have write the code for that plug-in and i have tested it well, if you don’t mind i will share on you blag ? can i do or not ?

  14. Track back from: http://webdevvote.com

  15. Nice plugin..
    Just wanted to highlight a bug. This does’nt work is I copy / paste certain text in the textarea. I think this is because you have mapped keypress event of the textarea. You have to check .onpaste event too.

    Nice effort and a simply jquery code.

    I like your site and I visit you frequently :)

  16. @Viral Patel – thanks a lot for the suggestion … I’ll be working on the the fixes mentioned by you and other friends in the another release of this plugin…

  17. Waqas

    please see this hope this will help you

    http://asimsajjad.blogspot.com/2008/11/jquery-word-counter.html

    very good article

  18. @waqas – thanks for revising my code…..

  19. Waqas

    I have not revised your code i have just read that post and from there i have check your post as the person name Asim has give your link

  20. veasna_set

    Thanks for your code.

  21. GOOD ONE! but how can we limit user to for example 100 words?

  22. Hi Roshan,
    Thanks for this code. It is exactly what i’m looking for. I also needed a way to limit to a specific number of words, so I added this to my code… Hope it is useful to someone:

    Inside the wordCount function at the “this.keypress” sub-function, I modified the code:
    if (total_words > p.wordLimit) {
    jQuery(‘#’+p.counterElement).html(p.wordLimit + ‘ word maximum reached’);
    } else {
    jQuery(‘#’+p.counterElement).html(total_words);
    }

    Next, in the document.ready area, I call the function and pass in a new variable for wordLimit:
    $(‘#word_count’).wordCount({counterElement:”word_counter, wordLimit:50 “});

    It’s not the most efficient way to do it, but you get the idea.

    Thanks again,
    Keith

  23. Fran (ssclamp)

    Thanks… very util

  24. iamvasim@alice.it

    Hello thanks for cool script,
    i want to add max word limit for user
    how to put this limit ?

    thank you.

  25. iamvasim@alice.it

    hello all i have make one function for word limitation check out ::::
    ==============================================================
    wordLen)
    {
    objvalue = obj.value.split(/[\s]+/);

    var newval = ”;

    for(var m=0; m<wordLen; m++)
    {
    newval+=objvalue[m]+’ ‘;
    }

    obj.value=”;
    obj.value=newval;

    return false;
    }
    return true;
    }

  26. nice

  27. IMF

    Quite useful, thanks.

  28. jQuery, since 1.2.2, has had an API for “special events”. These events are special because they have the ability to do some extra work for specific events and even the option to bypass some of the internal jQuery event system. With these special events you can create custom events that require some setup work or you can completely overwrite the behavior of native events.

  29. hi good thank you master

  30. thank you so much

  31. Really useful stuff

  32. I have forked this at http://github.com/alanhogan/jQuery-Word-Count/tree/master and made a minor improvement.

  33. Why to download, install, and then use plugin. Writing code to count words through javascript is 2 minutes job and can be done easily even without jQuery.

  34. Hi Roshan,

    To avoid doing too much counting (ie on every keypress) you could add something to check which key was pressed (in this example space or “.” – the comment about the comma is good too).


    this.keypress(function(k) {
    if (k.which == 32 || k.which == 46) {
    total_words=this.value.split(/[\s\.\?]+/).length;
    jQuery('#'+p.counterElement).html(total_words);
    }
    });

  35. i have used your above code .. and hell it works fine ..

  36. thank you adminstrator

  37. Good job, nice and easy :)

  38. Good plugin, better to handle zero-length inputs.

    total_words = 0;
    if (this.value.length > 0) {
    total_words=this.value.split(/[\s\.\?]+/).length;
    }

  39. Ardi Wirawan

    thanks.
    great tutorial..

  40. lokanath

    only space and . are not the word separator as a someone can use ; , tab special character etc….

  41. Hi dude,
    very gr8 article. Worked perfectly in normal HTML. But faced some problem while trying to integrate into ASP.NET website. Please help

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>