Count Words and Characters in JavaScript (2023)

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.

Let's get started.

In HTML markup, we have:

• textarea for user's input
• Words Counter result section
• Characters Counter result section

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:

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.

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

Here is an example from Word Counter application.

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

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.

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.

Our Coding guides: 

• THE ULTIMATE GUIDE TO CSS 2023
• THE ULTIMATE GUIDE TO HTML 2023
• THE ULTIMATE GUIDE TO SQL AND NOSQL 2023
• THE ULTIMATE GUIDE TO JAVASCRIPT 2023
• THE ULTIMATE GUIDE TO PHP 2023
• THE ULTIMATE GUIDE TO LIQUID (SHOPIFY) 2023
• THE ULTIMATE GUIDE TO PYTHON 2023
• THE ULTIMATE GUIDE TO JSON 2023

Happy Coding ♥