如何使用 JavaScript 在 textarea 中统计字数？

本文介绍了计算给定文本输入中单词数的方法。这在建议用户输入一定数量的单词并且单词计数器可以跟踪相同的情况下可能很有用。下面讨论两种方法：

方法 1：计算文本中存在的空格数

此方法依赖于输入字符串存在的空格数来计算单词数，因为句子中的每个单词都由空格分隔。函数countWord()被定义 它获取存在于 textarea 中的文本并计算其中存在的空格数。使用 getElementById() 方法选择 textarea 中的输入文本。

这种方法的缺点是单词之间的多个空格会被算作多个单词，因此可能会导致单词计数不可靠。

例子：

HTML

  

  
    
        GeeksforGeeks
    
  
    
        Type in the textbox and click on
        the button to count the words
    
  
  
        
    
  
    
        Count Words
    
    
  
     Word Count:
        0
    
  
  
    
        function countWords() {
  
            // Get the input text value
            var text = document
                .getElementById("inputField").value;
  
            // Initialize the word counter
            var numWords = 0;
  
            // Loop through the text
            // and count spaces in it 
            for (var i = 0; i < text.length; i++) {
                var currentCharacter = text[i];
  
                // Check if the character is a space
                if (currentCharacter == " ") {
                    numWords += 1;
                }
            }
  
            // Add 1 to make the count equal to
            // the number of words 
            // (count of words = count of spaces + 1)
            numWords += 1;
  
            // Display it as output
            document.getElementById("show")
                .innerHTML = numWords;
        }
    

  

输出：

方法二：以空格分隔单词，然后统计单词数

在这种方法中，我们通过在空格字符的基础上对单词进行拆分，然后检查每个拆分是否不仅仅是一个空格字符改进前一种方法的缺点。每次用户使用文本区域上的 oninput 事件处理程序在文本区域中键入内容时，都会调用 countWord()函数。

例子：

HTML

  

    
        GeeksforGeeks
    
  
    
        Type in the textbox to
        automatically count the words
    
  
  
        
    
  
     Word Count:
        0
    
  
  
    
        function countWord() {
  
            // Get the input text value
            var words = document
                .getElementById("word").value;
  
            // Initialize the word counter
            var count = 0;
  
            // Split the words on each
            // space character 
            var split = words.split(' ');
  
            // Loop through the words and 
            // increase the counter when 
            // each split word is not empty
            for (var i = 0; i < split.length; i++) {
                if (split[i] != "") {
                    count += 1;
                }
            }
  
            // Display it as output
            document.getElementById("show")
                .innerHTML = count;
        }
    

  

输出：

方法三：由于上述两种方法只能在连续给空格的情况下统计字数，但不能在每个单词以新行开头时计算数字。所以这种方法将能够计算从新行开始的单词。

例子：

HTML

  
    GeeksforGeeks
  
      
Type in the textbox to automatically count the words
  
  
     
    
  
    
      Word Count:
      0
    
  
  
    
      document
        .querySelector("#word")
        .addEventListener("keyup", function countWord() {
          let res = [];
          let str = this.value.replace(/[\t\n\r\.\?\!]/gm, " ").split(" ");
          str.map((s) => {
            let trimStr = s.trim();
            if (trimStr.length > 0) {
              res.push(trimStr);
            }
          });
          document.querySelector("#show").innerText = res.length;
        });
    
  

输出：