word counter for text area

GrimFandango · 10-04-2008, 09:12 PM

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

warzo69 · 10-05-2008, 05:09 AM

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>

Arty Effem · 10-05-2008, 05:29 AM

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>

warzo69 · 10-05-2008, 05:36 AM

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

vwphillips · 10-05-2008, 02:46 PM

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

Arty Effem · 10-05-2008, 07:09 PM

Quote:

Originally Posted by vwphillips

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

Quote:

pity about backspace not being recognised as a keyup

When?