Javascript Word Count

baazil69 · Dec 28, 2007

Here is the code that I found online to count the words a user has left in a textarea.

Code:

// Word Count 
var submitcount=0; 
function checkSubmit() { 
if (submitcount == 0) 
{ 
submitcount++; 
document.Surv.submit(); 
} 
} 
function wordCounter(field, countfield, maxlimit) { 
wordcounter=0; 
for (x=0;x<field.value.length;x++) { 
if (field.value.charAt(x) == " " && field.value.charAt(x-1)!= " ") {wordcounter++} // Counts the spaces while ignoring double spaces, usually one in between each word. 
if (wordcounter > 250) {field.value = field.value.substring(0, x);} 
else {countfield.value = maxlimit - wordcounter;} 
} 
} 
function textCounter(field, countfield, maxlimit) { 
if (field.value.length > maxlimit) 
{field.value = field.value.substring(0, maxlimit);} 
else 
{countfield.value = maxlimit - field.value.length;} 
}

Here are the textarea fields...

Code:

<textarea name="Q3367" cols="50" rows="4" wrap="hard" onKeyDown="wordCounter(this.form.Q3367,this.form.remLen,250);" onKeyUp="wordCounter(this.form.Q3367,this.form.remLen,250);"></textarea> 
<br><div style="margin-left: 270px;">Words remaining: <input type="text" name="remLen" value="250" size="3" readonly></div>

Again, this works almost perfectly. When a user is typing and hits the return or enter key (without inserting a space), the word is not counted. I need the javascript to, I guess, check for carriage returns along with white spaces?

Thanks in advance,
C

kaht · Dec 28, 2007

A good suggestion would be to hop over on google and read up on regular expressions. I rewrote all your code above into a 1-liner function using regular expressions. Most of the time, they are a very elegant way to simplify string manipulation.

Here's the 1-liner in purple, the regexp are highlighted in red. It takes leading and trailing spaces into consideration, as well as multiple spaces, tabs, line feeds, form feeds, and carriage returns:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

function wordCount(obj) {
   [purple]alert(obj.value.replace([!]/^\s|\s$/[/!], "").split([!]/\s+/[/!]).length + " words in this textarea.");[/purple]
}

</script>
<style type="text/css"></style>
</head>
<body>

<textarea id="ta" style="height:100px;width:100px"></textarea>
<br />
<input type="button" value="click me" onclick="wordCount(document.getElementById('ta'))" />

</body>
</html>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Javascript Word Count

baazil69

Programmer

kaht

Programmer

Similar threads

Part and Inventory Search

Sponsor