Minimalist Character & Word Counter In jQuery

File Size: 2.93 KB
Views Total: 453
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">
    <h3 id="words">0</h3>
    <h3 id="characters">0</h3>

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.