Minimalist Character & Word Counter In jQuery

A minimal Character & Word Counter that uses split() method and .length property to count the number of characters and words you type in a text field.

How to use it:

1. Create the HTML for the character and word counter.

<div class="output">
  <div>
    <h6>WORDS</h6>
    <h3 id="words">0</h3>
  </div>
  <div>
    <h6>CHARACTERS</h6>
    <h3 id="characters">0</h3>
  </div>
</div>

2. Load the latest jQuery library (slim is recommended) in the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

3. Apply the character and word counter to a text field within the document. That's it.

$(document).ready(function() {
  $("#toCount").on("input", function() {
    $("#characters").text(this.value.replace(/ /g,'').length);
    $("#words").text(this.value.trim().split(" ").filter((item) => item).length);
  });
});

---

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