JavaScript Word Count: A Step-by-Step Guide

In this short article, we’ll look at how to count the number of words in a paragraph using JavaScript, along with some practical examples.

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

JavaScript Example: Count the number of words in a string

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

Let’s take a quick look at the following examples.

As you can see, we have created the getWordCount JavaScript function that takes a string parameter and gives the total number of all words in the given string.

Let's understand how it works. First, we split the string on the space character using the split JavaScript string method, and as a result, we get an array of strings.

Next, we use the filter JavaScript array method to filter out empty strings - these empty strings appear when a string has two spaces in a row.

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

JavaScript Example: Count the number of words in a string using regular expressions

In the previous section, we discussed a JavaScript example to demonstrate how to count all words in a string. We do this by splitting on space characters. However, we must filter out empty strings that may appear when the source string has multiple spaces in a row.

In this section, we will modify the above example using regular expressions. Let's take a quick look at the example below.

This time, we use the /\s / regular expression to split the string, representing one or more whitespace characters. In this way, we can directly get the results we want without filtering the empty string. Additionally, the \s pattern matches new lines and tab characters, making the results more robust than matching whitespace characters directly. As you can see, counting the number of words in a string is even easier with the split JavaScript string methods!

Real world examples

In this section, we will see a practical example to demonstrate the usage of the getWordCount function we built in the previous sections.

Let's take a look at the following example that displays a real-time word counter as the user types in a text area.

So, as you can see, as the user types in the textarea, it displays a live counter! You can use and extend this example to display a message to the user when you want to limit the input text.

in conclusion

Today we discussed how to count words in JavaScript with a few examples.

The above is the detailed content of JavaScript Word Count: A Step-by-Step Guide. For more information, please follow other related articles on the PHP Chinese website!