ARTICLE

WordCount of textbox using jQuery

Posted by Sapna in Articles | ASP.NET using VB.NET on February 04, 2011

Tags: ASP.NET, jQuery, jQuery Articles, jQuery Tutorials, jQuery Word Count, Word count of textbox using jQuery

A simple description about the logic to display the total number of words/characters in textbox using jQuery.

Tweet
1551
0

Reader Level: Beginner

Sometimes we need to do these things which are not so important but very logical. Just like I will explain you further in this article about word count in a textbox using jQuery. The logic behind this is very simple and you can easily implement it on your project.

The following code includes the logic to display the total number of words including special characters but not all, from user input using jQuery.

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
   <script type="text/javascript">
      $(function () {
        $('#<%= btnlabl.ClientID %>').click(function () {
           var txtlablValue = $.trim($('#<%= txtlabl.ClientID %>').val());
           var wordCount = txtlablValue.split(/[\s\.\?]+/).length
           $('#<%= llabl.ClientID %>').html('Total Number of Words in Textbox: ' + wordCount);
           return false;
        });
     });
   </script>
   <style type="text/css">
     .style1
     {
       color: #993333;
       border-style: groove;
       border-width: 3px;
     }
   </style>
</head>
<body>
<form id="form1" runat="server"
    style="font-family: Verdana; font-size: small; font-weight: bold">
    <span class="style1" style="background-color: #FAF1F1; font-size: medium;">      Word Count Example  
    </span>
    <br />
    <br />
    <asp:TextBox runat="server" ID="txtlabl" TextMode="MultiLine" Width="362px"></asp:TextBox>
    <br />
      <br />
    <asp:Button ID="btnlabl" runat="server" Text="Click To Count" Font-Bold="True"
        Font-Names="Verdana" ForeColor="#993333" />
      <br />
    <br />
    <asp:Label ID="llabl" runat="server" Text=""></asp:Label>
</form>
</body>
</html>

Output

This is a very simple form which has a textbox for input, along with a button and a label which display the number of words/characters exist in the input. Lets see the output result of word count where all the characters are count including the full stop (.), but the symbol (!) is not counted.

Property Window