Count Words In Real Time With Javascript

Many times you may require to add the runtime indicator of the Words Counter in your application which displays the characters entered as a value in the particular form field. This task can be accomplished in many ways from a very simple way to complex level handling, using jquery or javascript.

Before writing this post, when I searched for the word counter in javascript I found so many scripts but many of them are not up to the mark. The script was like below:

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

Issue

This script is wrong. You are having a question why it's wrong? Because splitting with space is used in the above script. It's not the only thing to separate the words.

A new line will be inserted if there is a return at the end of the word, which won't be counted as a word separator by the above code.commas or other punctuations that are not followed by a space are also not handled in the above script. Even if you leave a space at the end of the word it will also be counted as a word that is totally wrong.

Solution

As a solution, in the following script, we are using a regular expression. The pattern '\w+'used here will match a string of characters of the word. Using this script you don't need to worry about extra space at the end of the word.

Script

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

HTML

<form name="demoform" method=”post”>
<center>
<div style="margin-top:100px;"><strong><a href="http://php-dev-zone.com">PHP Dev Zone</a></strong> - Words Counter Demo<div>

<div style="border:3px solid #7AAB8A;width:480px;height:200px;background-color:#99D6AD;margin-top:20px;">
    <table>
     <tr>
       <td><strong>Enter the Words in the Textarea</strong></td>
     </tr>
    <tr>
       <td colspan="2"><textarea style="background-color: rgb(238, 255, 238); margin: 2px; height: 93px; padding:2px 0 0 2px;" cols="40" onkeyup="wordcount(this.value)" name="texarea"> </textarea>
       </td>
     </tr>
    <tr>
       <td><label style="margin-left:165px;">Words entered :</label></td>
       <td><input type=text name=words id=word_count size=4 readonly ></td>
     </tr>
    </table>
</div>
</center>
</form>

CSS

body{ 
 display: inline; 
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 160%; 
 font-style: normal; 
 font-weight:1024; 
 color: #68677C; 
 background-color:#F6F9F9;
} 
a{
 color: #68677C; 
 text-decoration:blink;
}

Complete Form Demo

Let's put all together, and we have the below complete working source code for the words counter in Javascript.

<html>
<head>
<script type="text/javascript">
function wordcount(textarea){
 var chars = textarea.length,
 words     = textarea.match(/\w+/g).length;
 document.getElementById('word_count').value=words;
}
</script>
<style type="text/css"> 
body{ 
display: inline; 
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 160%; 
font-style: normal; 
font-weight:1024; 
color: #68677C; 
background-color:#F6F9F9;
} 
a{
color: #68677C; 
text-decoration:blink;
}
</style> 
</head>
<body>
<form name="demoform" method=”post”>
<center>
<div style="margin-top:100px;"><strong><a href="http://php-dev-zone.com">PHP Dev Zone</a></strong> - Words Counter Demo<div>

<div style="border:3px solid #7AAB8A;width:480px;height:200px;background-color:#99D6AD;margin-top:20px;">
    <table>
     <tr>
       <td><strong>Enter the Words in the Textarea</strong></td>
     </tr>
    <tr>
       <td colspan="2"><textarea style="background-color: rgb(238, 255, 238); margin: 2px; height: 93px; padding:2px 0 0 2px;" cols="40" onkeyup="wordcount(this.value)" name="texarea"> </textarea>
       </td>
     </tr>
    <tr>
       <td><label style="margin-left:165px;">Words entered :</label></td>
       <td><input type=text name=words id=word_count size=4 readonly ></td>
     </tr>
    </table>
</div>
</center>
</form>
</body>
</html>