Character counts for text is easy; word counts get a bit more subjective. This can be accomplished with a bit of JavaScript/jQuery and a regular expression.
Google for regular expressions like this and you’re likely to find a vast amount of complicated expressions. Be careful of these unless you have a specific business need for a complicated regular expression. I found many counted certain punctuation within a word or adjacent to it as a separate word. I found a great JSFiddle that contains the simplest way to count words – just look for the spaces between characters.
var regex = /\s+/gi; var wordCount = value.trim().replace(regex, ' ').split(' ').length;
The regex variable is a regular expression that looks for spaces, ignores casing, and performs a global search. Want to verify that? Test it out in this RegEx tester. The wordCount variable trims the empty space outside of the string, replaces any internal whitespace with a single space, and then counts the number single spaces.
Now that you have a way to identify words and count them, the next step is to limit the text box to a certain number of words. Let’s start with a multi-line text box and word counter:
<textarea id="text-input" cols="25" rows="3"></textarea> <div class="word-counter"> Word Count: <label id="count-label">0</label>/10 </div>
Using a bit of jQuery, you can then count the number of words, update the counter, and limit the textarea input to a maximum number of words (in this case 10 words).
var limitWord = 10; $("#text-input").keyup(function () { $this = $(this); var regex = /\s+/gi; var wordcount = jQuery.trim($this.val()).replace(regex, ' ').split(' ').length; if (wordcount <= limitWord) { chars = $this.val().length; } else { var text = $(this).val(); var new_text = text.substr(0, chars); $(this).val(new_text); wordcount --; } $("#count-label").html(wordcount); });
The result is:
A working sample can be found here, on JSFiddle: http://jsfiddle.net/justinsaraceno/ezZxf/
Thanks! Worked like a charm, even now.
Thanks.. it’s working
Thx!
and if I wish the last space can not be captured, how do I do?
I’d like to make my wordpress post length dynamic using media queries and javascript, and need a way to feed the content to javascript for calculation and display. Is this function suitable? Any thoughts on how it could be applied in a wordpress template?
Thanks,
Brian