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 :

<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(" ")

<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.
<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

<!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

var words=innerText.replace(/\s\s/g,' ').split(' ').length;
That counts multiple spaces as words. You can split on a regex to avoid thatvar 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 1pity about backspace not being recognised as a keyupWhen?