Word Counter in javascript



Before writing this post,when i have searched for the word counter in javascript i found so many scripts that 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 its wrong?.Because splitting with space is used in the above script.Its not the only thing to separate the words.

A newline 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 srting of characters of the word.Using this script you dont need to worry about extra space at the end of the word.

<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.blogspot.in">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>

Comments

Post a Comment

Popular posts from this blog

How to construct a B+ tree with example

Image
A B+ tree contains n-1 search key values K1K2…….Kn-1 and have n pointers.   In a B+ tree the data are ordered  sequentially.  The leaf node may hold up to n pointers and must hold at least N/2 pointers. The root node must hold at least two pointers, unless the tree consists of only one node.  Now we construct a B+ tree. Construct a B+ tree for the following set of key values: (2,3,5,7,11,17,19,23,29,31) Assume that the tree is initially empty and values are added in ascending order. Construct a B+ tree where the pointer number is Four. Solution: When a node exceeds n-1 search key value then we split it into two nodes. First node contains (ceiling(n-1)/2) values.  2 nd node contains remaining node. Copy the smallest search key value of the second node to the parent node. Let's start, we know each node has N pointer and has N-1 search key values. In our example pointer number is 4, so the search key value is 4-1=3. So each node has 4 pointers and 3 search key value. The first node i
Read more

How to show only month and year fields in android Date-picker?

Image
Android default DatePicker show day/month/year fields but you have to customize this DatePicker as your requirements. Suppose that you want to show only month and year fields in android datepicker . To do this, you have to customize the Dialog DatePicker source code but it is not an easy task. In this tutorial I will show you a tricky way to solve this problem. Lets see how to show only month and year field in android DatePicker as a dialog.   Step to show only month and year fields in android date-picker: Some days ago I got this same problem and here I am trying to explain this in a sequential manner. I want to show a dialog datepicker when user click on an EditText. So if user click on EditText, A dialog datepicker will be invocked and it will show only month and year fields. To do this, at first we have to create a xml layout to hold the EditText fields. So create an android project and name it DatePickerExample. In the main.xml file just try to write this simple code.  main.xml
Read more

Visitor Counter Script Using PHP

Image
If you have noticed that many websites display their total numbers of visitors.In this tutorial I am going to explain you how to create a simple visitor counter using php. For this, 1) Create one table called “visitor_counter” in your database. 2) Create file named “counter.php”. Step1: Creating “visitor_counter” Table CREATE TABLE `visitor_counter` ( `counts` int(10) NOT NULL default '0' ) Step2: Creating “counter.php” File <?php  // Database Details $host="localhost"; $username="root"; $password=""; $db_name="test"; $tbl_name="visitor_counter"; // Connect to server and select database. mysql_connect("$host", "$username", "$password")or die("cannot connect to server "); mysql_select_db("$db_name")or die("cannot select DB");  $sql="SELECT * FROM $tbl_name"; $result=mysql_query($sql); $rows=mysql_fetch_array($result); $counter=$rows['counts']; // se
Read more