Javascript • 1 year ago

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>

 

Categories

Tags