Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

How to Count Words in JavaScript

by
Read Time:3 minsLanguages:

In this quick article, we’ll see how you can count words in a paragraph with JavaScript, along with a couple of real-world examples.

As a JavaScript developer, sometimes you need to limit the user input in the text box. There are two ways to limit user input: either by the number of characters or by the number of words. Today, we’ll discuss the latter—how you can count the number of words in a string in JavaScript.

JavaScript Example: Count Words in a String

In this section, we’ll build a custom JavaScript function which allows you to count all the words in a string.

Let’s have a quick look at the following example.

As you can see, we’ve made the getWordCount JavaScript function, which takes a string argument and gives the total count of all words in the given string.

Let’s understand how it works. Firstly, we’ve used the split JavaScript string method to split the string on the space character, and as a result, we get an array of strings.

Next, we’ve used the filter JavaScript array method to filter out empty strings—these could show up when the string has two spaces in a row.

Finally, we have an array of words (along with other punctuation marks), and we can use the array length property to count the number of elements in the array. And that gives us the total number of words in a given string!

JavaScript Example: Count Words in a String With Regex

In the previous section, we discussed a JavaScript example to demonstrate how you can count all words in a string. We did so by splitting on the space character. However, we had to filter out empty strings that could show up when the source string has multiple spaces in a row.

In this section, we’ll revise that aforementioned example with regex. Let’s have a quick look at the following example.

This time, we split the string with the /\s+/ regular expression, meaning one or more whitespace characters. This way, we go directly to the result we want, without needing to filter the empty strings. Also, the \s pattern matches new lines and tabs, making the result more robust than matching space characters directly. As you can see, with the help of the split JavaScript string method, it’s even easier to count words in a string!

A Real-World Example

In this section, we'll see a real-world example to demonstrate the use of the getWordCount function that we built in the previous sections.

Let's go through the following example, which displays a real-time word counter when a user types in the text area.

So, as you can see, when a user types into the text area, it displays a real-time counter! You can use and extend this example to display a message to the user when you want to limit the input text.

Conclusion

Today, we discussed how to count words in JavaScript with a couple of examples.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.