Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to make a word count in textarea using JavaScript?
Sometimes, the task is to count the words entered in an input box or a text area. The textarea is often used if we want to show multiple lines of text. While entering the text into the text area, the user may use blank spaces as the separation between the words or between lines. Using HTML, and javascript code with Jquery library, this process of counting the words in the entered text is demonstrated in this article. This is shown by using two different examples. In the first example, the blank spaces or newlines entered are counted, to find the word count. In the second example, the newlines are first replaced by simple spaces and then the text split is used to split the text at spaces to find the word count.
Example 1: Using HTML and JavaScript code to find the word Count by Counting Spaces and Newlines in the Text
Code Design Steps
Step 1 − Make an HTML file and start writing the code.
Step 2 − Make three <p> tags. Given the different ids. One will display text. The second will show the word count. The third will display the character count.
Step 3 − Make a function and in it using a for loop start counting the characters from the entered text. Check if a space is entered or a new line has come, and then increase the word count value.
Step 4 − Creation of a button and call the above function on click of this.
Step 5 − Execute the program to verify the result.
<!DOCTYPE html>
<html>
<head>
<title>Word Count Example</title>
</head>
<body> <h1> Count the words written in the text area</h1>
<h2>Enter the Text </h2>
<textarea id="text11" rows="4" cols="50"></textarea>
<button type="button" name="action" onclick="wordcountfunction()">Count Words</button>
<p id="paratext" style='white-space:pre'></p>
<p id="paracountw"></p>
<p id="paracountc"></p>
<script>
function wordcountfunction(){
var x = document.getElementById("paratext");
var y = document.getElementById("paracountw");
var z = document.getElementById("paracountc");
var testString=document.getElementById("text11").value;
var myArray = testString.replace( /
/g, " " ).split( " " );
if(testString){
x.innerHTML = testString ;
}else{
console.log("enter the text in the text area first")
}
var characterCount = 0;
var wordCount = 1;
var nn;
for (var chr = 0; chr < testString.length; chr++) {
nn=testString[chr];
characterCount=characterCount+1;
if(nn == ' ' || nn.indexOf("
") != -1){
wordCount++;
}
y.innerHTML = "word Count : " + wordCount ;
z.innerHTML = "CHARACTER count : " + characterCount ;
document.getElementById("text11").value = "";
}
}
</script>
</body>
</html>
To view the Result - Example 1
To see the result open the html file in a browser. Now click the button and check the result.
Example 2: Using HTML and JavaScript Code to Find the word Count by Using Text Split Method
Code Design Steps
Step 1 − Make an html file and start writing the code.
Step 2 − Make three <p> tags . Given the different ids. One will display text. The second will show the word count. The third will display the character count.
Step 3 − Make a function and in it check if any newline is present. Replace this with space. Now, split the text in the space and store the parts in an array. The number of words entered in the array is the word count.
Step 4 − Button would be created and invoke the above function on click of this.
Step 5 − Run the program and display the result.
Here the Words are Separated and put Inside an Array.
<!DOCTYPE html>
<html>
<head>
<title>Word Count Example</title>
</head>
<body> <h1> Count the words by using text Split</h1>
<h2>Enter the Text </h2>
<textarea id="text11" rows="4" cols="50"></textarea>
<button type="button" name="action" onclick="wordcountfunction()">Count Words</button>
<p id="paratext" ></p>
<p id="paracountw"></p>
<p id="paracountc"></p>
<script>
function wordcountfunction(){
var x = document.getElementById("paratext");
var y = document.getElementById("paracountw");
var z = document.getElementById("paracountc");
var testString=document.getElementById("text11").value;
var myArray = testString.replace( /
/g, " " ).split( " " );
if(testString){
x.innerHTML = "The words entered: " + testString ;
}else{
console.log("enter the text in the text area first")
}
var characterCount=0;
var wordCount=1;
var n;
for (var i = 0; i < testString.length; i++) {
n=testString[i];
characterCount=characterCount+1;
if(n == ' ' || n.indexOf("
") !=-1){
wordCount = wordCount+1;
}
y.innerHTML = "word Count : " + wordCount ;
z.innerHTML = "CHARACTER count : " + characterCount ;
document.getElementById("text11").value = "";
}
}
</script>
</body>
</html>
To View The Result
To display the result open the html file in a browser. Now enter some lines in the text area. Click the count words button to see the word count.
In this JavaScript-HTML article, using two different examples, the ways to show how to count the words entered in the text area are given. First, the method is given where the spaces entered between words and the entered new lines are analyzed to give the word count. In the second example, the text split method is used on spaces entered, after converting all newlines to simple spaces.
1K+ Views
