search

Home >Web Front-end >JS Tutorial >How to do a word count on a text area using JavaScript?

How to do a word count on a text area using JavaScript?

PHPz
PHPzforward
2023-09-08 17:09:061872browse

如何使用 JavaScript 对文本区域进行字数统计？

Sometimes the task is to count the number of words entered in an input box or text area. If we want to display multiple lines of text, we usually use a text area. When entering text into a text area, users can use spaces as separations between words or between lines. This article demonstrates the process of counting words in input text using HTML and javascript code and the Jquery library. This is illustrated using two different examples. In the first example, the input spaces or newlines are counted to find the word count. In the second example, first replace line breaks with simple spaces and then use text splitting to split the text by spaces to find the word count.

Example 1: Use HTML and JavaScript code to find the word Count

by counting spaces and newlines in text

Code design steps

  • Step 1 - Create an HTML file and start writing code.

  • Step 2 - Make three e388a4556c0f65e1904146cc1a846bee tags. Given different ids. One of them will display text. The second one will show the word count. The third one will show the number of characters.

  • Step 3 - Create a function and start counting the number of characters in the input text using a for loop within it. Checks to see if spaces or newlines have been entered, and then increments the word count.

  • Step 4 - Create a button and call the above function when the button is clicked.

  • Step 5 - Execute the program to verify the results. 

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

View results - Example 1

To see the results, open the html file in your browser. Now click on the button and check the result.

Example 2: Find word count via text splitting method using HTML and JavaScript code

Code design steps

  • Step 1 - Create an html file and start writing code.

  • Step 2 - Make three e388a4556c0f65e1904146cc1a846bee tags. Given different ids. One of them will display text. The second one will show the word count. The third one will show the number of characters.

  • Step 3 - Create a function and check if there is a newline character in it. Replace it with spaces. Now, split the text in space and store the parts in an array. The number of words entered in the array is the number of words.

  • Step 4 - A button will be created and the above function will be called when this button is clicked.

  • Step 5 - Run the program and display the results.

Here the words are separated and put into 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>

View Results

To display the results, open the html file in your browser. Now enter some lines in the text area. Click the Word Count button to view the word count.

In this JavaScript-HTML article, we show how to count the number of words entered in a text area, using two different examples. First, a method is given to analyze the input spaces between words and the input newlines to give the word count. In the second example, the text splitting method is used on the input spaces after converting all line breaks to simple spaces.

The above is the detailed content of How to do a word count on a text area using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery html count for 循环
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to set the minimum allowed proportion value of an ellipse using FabricJS?Next article：How to set the minimum allowed proportion value of an ellipse using FabricJS?

Related articles

See more