Jul 14, 2013

Ketan Patel

Word Counter in javascript

Word Counter in 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 particular form field. This task can be accomplished in many ways from 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");
}


This script is wrong. You are having 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 Return at the end of the word, which won't be counted as a word separator by the above code.commas or other punctuations  which 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 counted as a word that is totally wrong.

So what could be the right solution for this case? As a solution, in the following script we are using 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>

Ketan Patel

About Ketan Patel -

I have developed a wide range of websites using CorePHP, Opencart, CakePHP and CodeIgniter including sites for startup companies and small businesses. Apart from my blogging life, I like to read Novels, Listening music and Net surfing.

Subscribe to this Blog via Email :