JavaScript Word Count Script

In many web applications, we sometimes need to count how many words a user has typed. For example, when someone fills out a contact form, writes a blog comment, or posts on a forum, we may want to show how many words they have entered in real-time.

This feature is known as a Word Counter. In this article, you will learn how to create a word count script using JavaScript. This is a very simple and useful feature that you can add to any form.

Why Use a Word Counter?

There are many reasons why you may want to count words in a form:

• To limit the number of words a user can type.
• To give users a live idea of how much they’ve written.
• To meet SEO or content rules that require a minimum or maximum word count.
• For academic or writing-based platforms that have a strict word limit.

Common Mistake in Word Count Scripts

Many beginner scripts just split text by spaces to count words. But this method is not correct. Here's a simple example of a wrong script:

function countwords(textarea){
  var words = textarea.split(" ");
  alert(words.length + " words");
}
  

This script may look fine, but it has problems:

• It counts empty spaces as words.
• It does not handle punctuation marks properly.
• It doesn’t handle line breaks or multiple spaces well.
• It may give wrong counts if there are extra spaces or tabs.

Correct Way to Count Words Using JavaScript

A better way is to use a regular expression. This allows us to match actual words instead of just splitting by space.

Here's a simple and improved script:

<script type="text/javascript">
function wordcount(textarea){
  var chars = textarea.length;
  var words = textarea.match(/\w+/g);
  if (words) {
    document.getElementById('word_count').value = words.length;
  } else {
    document.getElementById('word_count').value = 0;
  }
}
</script>
  

This code counts only actual words using `\w+`, which means it matches letters and numbers. It ignores extra spaces, new lines, and empty inputs.

Simple HTML Form with Word Count

<form name="demoform" method="post">
  <div style="margin-top:20px;">
    <strong>Word Count Demo</strong>
  </div>

  <div style="border:1px solid #ccc; width:480px; background-color:#f0f0f0; padding:10px;">
    <table>
      <tr>
        <td>Enter your text:</td>
      </tr>
      <tr>
        <td>
          <textarea name="texarea" rows="6" cols="50" onkeyup="wordcount(this.value)"></textarea>
        </td>
      </tr>
      <tr>
        <td>
          Words entered: <input type="text" id="word_count" size="4" readonly>
        </td>
      </tr>
    </table>
  </div>
</form>
  

Things to Remember

• Use proper regular expressions for accurate word count.
• Handle null or empty inputs in your JavaScript code.
• Always test the counter with different types of input: spaces, punctuation, new lines.
• Word count is useful, but make sure your form works well on mobile devices too.

Use Cases of Word Count Script

You can use this script in many places:

• Contact forms where user input is limited to 100 words.
• Feedback forms where you want at least 50 words.
• Blog submission forms for guest posts.
• Job application forms or resume editors.
• Online exams or writing tests.

Conclusion

Creating a word counter in JavaScript is not difficult. The key is to use a reliable method that works well for different types of input. Using regular expressions gives you more control and better results. This script is easy to integrate into any form and works for all devices.

We hope this guide helps you understand the basics of counting words using JavaScript. If you are new to coding, try modifying the script and test with different inputs. That’s the best way to learn!