Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    word counter for text area

    hello
    i'm a beginner please help me

    i'm trying to build a page with a text area that underneath it there's
    a line that updates while typing -how many words the user wrote.

    i've allready did a line with a characters counter :


    Code:
    <HTML>
     <HEAD>
    
    			<script type="text/javascript">
    
    			var yht= "You have Typed ";
    
    				function defineCharacters()
    				{
    					var innerText = document.getElementById("textField").value;
    					var charLength = innerText.length;
    					var lineOneInfo = yht+charLength+" characters";
    					document.getElementById("firstLine").innerHTML=lineOneInfo;
    				}
    
    
    			</script>
    
     </HEAD>
    
     <BODY>
      
    			<h1> Exercise number 6: </h1>
    	
    			<textarea rows="8" cols="70" id="textField" align="ltr" onkeydown="return defineCharacters()"></textarea>
    
    			<h3 id="firstLine" onkeydown="defineCharacters()">
    
    			</h3>
    				
    			<h3 id="secondLine">
    
    			</h3>
    				
    			<h3 id="ThirdLine">
    
    			</h3>
    
     </BODY>
    </HTML>
    I don't know how to make it count the words.. like: "I love hummus" = 3 words.
    I thougth to make it define the words with RegEx : /^\s*\[A-Za-z]+\s+/;
    but I don't know what to do with it

  • #2
    New Coder
    Join Date
    Sep 2008
    Posts
    32
    Thanks
    2
    Thanked 4 Times in 4 Posts
    you just need to add .split(" ")


    Code:
    <HTML>
      <HEAD>
        <script type="text/javascript">
    
    var yht= "You have Typed ";
    
    function defineCharacters()
    {
    
    var innerText = document.getElementById("textField").value.split(" ");
    var charLength = innerText.length;
    var lineOneInfo = yht+charLength+" words";
    
    document.getElementById("firstLine").innerHTML=lineOneInfo;
    }
    
    
    
    
        </script>
    
      </HEAD>
    
      <BODY>
        <h1> Exercise number 6: </h1>	
        <textarea rows="8" cols="70" id="textField" align="ltr" onkeydown="return defineCharacters()"></textarea>
        <h2 id="firstLine" onkeydown="defineCharacters()">
        </h2>	
        <h3 id="secondLine">
        </h3>
        <h3 id="ThirdLine">
        </h3>
      </BODY>
    </HTML>

  • #3
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    When used with the i flag, the exec method is useful for word counting. The onkeyup event is more suitable for this application.
    Code:
    <script type="text/javascript">
    
    var yht= "You have Typed ";
    
    function defineCharacters()
    {
      var re=/\b\w+\b/g, words=0;
    		   
      var innerText = document.getElementById("textField").value;
      var charLength = innerText.length;
      var lineOneInfo = yht+' '+charLength+" character" + (charLength==1 ? '' : 's');
    					
      while( re.exec(innerText) )
       words++;					
    					
      document.getElementById("firstLine").innerHTML=lineOneInfo+' in '+words+' word' +(words==1 ? '' : 's');
    }
    
    </script>

  • #4
    New Coder
    Join Date
    Sep 2008
    Posts
    32
    Thanks
    2
    Thanked 4 Times in 4 Posts
    there are going to be some situation with that code that cause an issue, ie if all spaces are typed it will count each as a word, and when it is cleared it wont update to show no words. If you want to know how to do that let me know. Ill e-mail you the code.

    warzo69@adelphia.net

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    also consider

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script type="text/javascript">
    
    var yht= "You have Typed ";
    
    function defineCharacters()
    {
    //  var re=/\b\w+\b/g, words=0;
    
      var innerText = document.getElementById("textField").value;
      var charLength = innerText.length;
      var lineOneInfo = yht+' '+charLength+" character" + (charLength==1 ? '' : 's');
      var words=innerText.replace(/\s\s/g,' ').split(' ').length;
    //  while( re.exec(innerText))
    //   words++;
    
      document.getElementById("firstLine").innerHTML=lineOneInfo+' in '+words+' word' +(words==1 ? '' : 's');
    }
    
    </script>
    
    </head>
    
    <body>
    <textarea id="textField" rows="20" cols="100" onkeyup="defineCharacters()"></textarea>
    <div id="firstLine" ></div>
    </body>
    
    </html>
    pity about backspace not being recognised as a keyup
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by vwphillips View Post

    Code:
      var words=innerText.replace(/\s\s/g,' ').split(' ').length;
    That counts multiple spaces as words. You can split on a regex to avoid that
    Code:
    var words=innerText.replace(/^\s+|\s+$/g,' ').split(/\w\s+\w/).length;
    but split.length will always be at least 1, so entering a space on its own will show as 1
    pity about backspace not being recognised as a keyup
    When?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •