How to count words in a textarea in JavaScript?
Following example shows you how to count number of words in a textarea using javascript.
In some cases you may need to count/get number of words in a textarea or text box. As an example You may need to limit number of words in a description (such as user comment or other description in your web application). Using following javascript you can count number of words in a textarea or a text box.
Demo- Count number of words in a textarea or text box using JavaScript.
Enter some text in the given textarea above, then click on Count Words to get the number of words you have entered. There are two additional option to remove one letter words and count 'a', 'an', 'the' as words or not.
Try It!
| How to Count words in a textarea. | ||
| Enter your description | ||
Enter some text in the given textarea above, then click on Count Words to get the number of words you have entered. There are two additional option to remove one letter words and count 'a', 'an', 'the' as words or not.
Try It!
1. Example code for get/count the number of words in a textare or a text box.
JavaScript Code<script type="text/javascript" language="javascript">
<!--
function wordCounter(textField){
var text=document.getElementById(textField).value;
var words=text.split(' ');
var numberOfWords=words.length;
var countOneLetterWords=document.getElementById("checkIgnoreOneLetterWord").checked;
var countStandardWords=document.getElementById("countStandardWords").checked;
for(var i=0;i<words.length;i++){
var currentWord=words[i];
//alert(currentWord);
if(currentWord==""){
numberOfWords--;
}
if(countOneLetterWords==true && countStandardWords==true){
if(currentWord.length==1){
if(currentWord.toLowerCase()!="a"){//count 'a' as a word
numberOfWords--;
}
}
}else if(countOneLetterWords==false && countStandardWords==false){
//ignore 'a' 'an' 'the' as words
switch(currentWord.toLowerCase()){
case "a":{numberOfWords--;}break;
case "an":{numberOfWords--;}break;
case "the":{numberOfWords--;}break;
default:{}break;
}
}else if(countOneLetterWords==true && countStandardWords==false){
if(currentWord.toLowerCase()=="a"){//ignore 'a' as a word
numberOfWords--;
}else{
switch(currentWord.toLowerCase()){
case "a":{numberOfWords--;}break;
case "an":{numberOfWords--;}break;
case "the":{numberOfWords--;}break;
default:{}break;
}
}
}
}
alert("Number of words in your text = "+numberOfWords);
return true;
}
-->
</script>
<!--
function wordCounter(textField){
var text=document.getElementById(textField).value;
var words=text.split(' ');
var numberOfWords=words.length;
var countOneLetterWords=document.getElementById("checkIgnoreOneLetterWord").checked;
var countStandardWords=document.getElementById("countStandardWords").checked;
for(var i=0;i<words.length;i++){
var currentWord=words[i];
//alert(currentWord);
if(currentWord==""){
numberOfWords--;
}
if(countOneLetterWords==true && countStandardWords==true){
if(currentWord.length==1){
if(currentWord.toLowerCase()!="a"){//count 'a' as a word
numberOfWords--;
}
}
}else if(countOneLetterWords==false && countStandardWords==false){
//ignore 'a' 'an' 'the' as words
switch(currentWord.toLowerCase()){
case "a":{numberOfWords--;}break;
case "an":{numberOfWords--;}break;
case "the":{numberOfWords--;}break;
default:{}break;
}
}else if(countOneLetterWords==true && countStandardWords==false){
if(currentWord.toLowerCase()=="a"){//ignore 'a' as a word
numberOfWords--;
}else{
switch(currentWord.toLowerCase()){
case "a":{numberOfWords--;}break;
case "an":{numberOfWords--;}break;
case "the":{numberOfWords--;}break;
default:{}break;
}
}
}
}
alert("Number of words in your text = "+numberOfWords);
return true;
}
-->
</script>
HTML Code
<html>
<head><title>How to count Words in a text box or a textarea</title>
</head><body>
<table>
<tr>
<td colspan="3" align="left"><span class="demo_title"><a name="label_1" id="label_1"></a></span>1. Count words in a textarea. </td>
</tr>
<tr>
<td align="right">Enter your description </td>
<td align="left"><label>
<textarea name="txtWordCounter" cols="40" rows="8" id="txtWordCounter" title="Enter a decimal number here"></textarea>
</label></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="left"><label>
<input name="checkIgnoreOneLetterWord" type="checkbox" id="checkIgnoreOneLetterWord" value="1" />
Ignore one letter words/characters as a word. </label></td>
<td align="left"> </td>
</tr>
<tr>
<td> </td>
<td align="left"><label>
<input name="countStandardWords" type="checkbox" id="countStandardWords" value="1" checked="checked" />
Count 'a'. 'an', 'the' as words. </label></td>
<td align="left"> </td>
</tr>
<tr>
<td> </td>
<td align="left"><input name="btnDecimalNumberValidator" type="submit" id="btnDecimalNumberValidator" onclick="javascript:wordCounter('txtWordCounter');" value="Count Words" title="Click here to validate" /></td>
<td align="left"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
</body>
</html>
<head><title>How to count Words in a text box or a textarea</title>
</head><body>
<table>
<tr>
<td colspan="3" align="left"><span class="demo_title"><a name="label_1" id="label_1"></a></span>1. Count words in a textarea. </td>
</tr>
<tr>
<td align="right">Enter your description </td>
<td align="left"><label>
<textarea name="txtWordCounter" cols="40" rows="8" id="txtWordCounter" title="Enter a decimal number here"></textarea>
</label></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="left"><label>
<input name="checkIgnoreOneLetterWord" type="checkbox" id="checkIgnoreOneLetterWord" value="1" />
Ignore one letter words/characters as a word. </label></td>
<td align="left"> </td>
</tr>
<tr>
<td> </td>
<td align="left"><label>
<input name="countStandardWords" type="checkbox" id="countStandardWords" value="1" checked="checked" />
Count 'a'. 'an', 'the' as words. </label></td>
<td align="left"> </td>
</tr>
<tr>
<td> </td>
<td align="left"><input name="btnDecimalNumberValidator" type="submit" id="btnDecimalNumberValidator" onclick="javascript:wordCounter('txtWordCounter');" value="Count Words" title="Click here to validate" /></td>
<td align="left"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
</body>
</html>
©-Copyright By Duminda Chamara
JavaScript Validation
JavaScript Validation
0 comments:
Post a Comment