Tiny Word Counter For Any Element - wordCounter.js

File Size: 2.74 KB
Views Total: 672
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Tiny Word Counter For Any Element - wordCounter.js

A super tiny and cross-browser word counter jQuery plugin to calculate the number of words in your text.

Not only text fields (input & textarea), the word counter plugin supports any inline and block elements such as paragraphs, DIVs, LABELs, SPANs, heading elements and much more.

How to use it:

1. Create a Result element to display the word count.

<span id="result"></span>

2. Download the plugin and put the JavaScript wordCounter.js after jQuery.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="js/wordCounter.js"></script>

3. Attach the plugin to the target text container in which you want to count the number of words.

<p id="count">
  Sed non laoreet quam. Cras tristique sapien vitae nunc finibus ullamcorper. Sed interdum velit quam, in ultricies enim viverra nec. Donec hendrerit dui at malesuada pulvinar. Nulla sapien velit, euismod nec vehicula eleifend, venenatis posuere libero. Vestibulum arcu ex, commodo sed orci ac, eleifend vestibulum sem. In scelerisque leo ut nulla tempus, ut cursus tellus accumsan. Donec sagittis elit vel accumsan euismod. Duis id ipsum quis augue lacinia commodo. Ut malesuada posuere tortor, ut mattis quam cursus a. Fusce vitae venenatis mi. Praesent risus risus, aliquam at diam non, dapibus efficitur massa.
</p>
$(function(){
  var totalWords = $("#count").wordCounter();
});

4. Output the word count in the Result element you just created.

totalWords  = "Total Word Count is "+totalWords;
$("#result").html(totalWords);

5. Supported elements:

var formElementList = ["INPUT", "TEXTAREA"];
var otherElements   = ["H1", "H2", "H3", "H4", "H5", "H6", "P", "SPAN", "DIV", "LABEL", "B", "CENTER"];

This awesome jQuery plugin is developed by chauhanravinder. For more Advanced Usages, please check the demo page or visit the official website.