Count Words and Characters in JavaScript (2022)

Written by Shan Shah
Updated on April 4, 2022
3 mins read
count words and characters in javascript

You may have seen applications about count words and characters in javascript.

But, you don't have an idea yet that how to make such an application.

In this tutorial, you will learn to make your own application of live count words and characters in javascript.

counting words and characters in javascript

Let's get started.

In HTML markup, we have:

  • textarea for user's input
  • Words Counter result section
  • Characters Counter result section
counting words and characters in javascript

We need to fetch:

  • meta-description (So, we can get the value which user's type)
  • meta-desc-words (To show total words count)
  • meta-desc-chs (To show total characters count)

You can use document (getElementById or querySelector) to fetch the dom elements.

I'm using document.querySelector:

fetch dom elements in javascript

Next, we need two functions one for count characters and the other for count words:

Count Characters:

In countCharacters function:

  • First Check if the passing value is a string or not.
  • If it is not a string then false will return otherwise will move to the next expression.
  • trim is a string method that removes white space from start and end.
  • length will return the count of characters as well as white-space in a string.
count characters in javascript

Note: White-spaces are also considered as a character in real-world applications.

Here is an example from Word Counter application.

word counter javascript

Count Words:

Steps involved in countWords:

  • First Check if the passing value is a string or not.
  • If it is not a string then false will return otherwise will move to the next expression.
  • trim is a string method that removes white space from start and end.
  • split returns an array of substrings separated by pattern.
  • \s+ is a regular expression.
  • \s matches any whitespace character (spaces, tabs, or linebreaks)
  • "+" is a quantifier (Match one or more preceding values or tokens - In Our case, it's whitespace \s)
  • the filter is an array method, which filtered out the array based on the condition.
  • We don't want any empty strings inside the array, that's why we used a filter.
  • length will return the count of values (words) inside an array
count words in javascript

Tip: You can test the same regular expression at regexr. It's a pretty solid website to learn and test regular expression on the fly.

Now, we have the functions ready. Let's display.

Display total words and characters count:

Steps involved in displaying the word and characters count:

  • Put an event listener of input on metaDescription (textarea field).
  • input event will detect any change inside field (textarea)
  • Get the words to count with count words function by passing meta description value.
  • Same call for count characters
  • Then, display in the specific areas by using innerHTML or textContent.
input javascript event

Hurrah! You have completed your counting words and characters in javascript.

Now, below are the steps you can perform (Optional):

  • Make it beautiful by using custom CSS or any front-end CSS framework
  • If you know reactJS, try to implement it in reactJS.
  • Deploy it somewhere on vercel, Github pages, etc. So, people can see and use it.
  • Don't forget to share this guide on Twitter or LinkedIn.
  • Lastly, you can subscribe to newsletter.
Count Words and Characters in JavaScript Click To Tweet

I'll see you with another cool project.

Happy Coding ♥

Project Based Tutorials
Tips & Tricks
Modern Technologies
Real-World Challenges
Creative Content
Build-Apps from Scratch
Web Development Content
17+ Videos Published
Coder Champ © 2021 - 
Privacy Policy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram