如何使用JavaScript在文本区域中进行字数统计

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

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

该方法依赖于输入字符串中的空格数来计算单词数，因为句子中的每个单词都由一个空格分隔。定义了一个名为 countWord() 的函数，它接受文本区域中的文本并计算其中的空格数。使用getElementById()方法选择文本区域中的输入文本。

该方法的缺点是多个单词之间的多个空格将被计为多个单词，因此可能导致单词计数不可靠。

例子： 此例演示了上述方法。

<body style="text-align: center;">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <p>
        在文本框中输入内容，然后单击按钮以计算单词数。
    </p>

    <textarea id="inputField" rows=10 cols="60">
    </textarea>
    <br><br>

    <button onclick="countWords()">
        计算单词数
    </button>
    <br><br>

    <p> 单词计数:
        <span id="show">0</span>
    </p>

    <script>
        function countWords() {

            // 获取输入文本的值
            var text = document
                .getElementById("inputField").value;

            // 初始化单词计数器
            var numWords = 0;

            // 遍历文本并计算其中的空格数
            for (var i = 0; i < text.length; i++) {
                var currentCharacter = text[i];

                // 检查字符是否为空格
                if (currentCharacter == " ") {
                    numWords += 1;
                }
            }

            // 添加1以使计数等于单词数
            // (单词计数 = 空格计数 + 1)
            numWords += 1;

            // 将计数显示为输出
            document.getElementById("show")
                .innerHTML = numWords;
        }
    </script>
</body>

输出：

如何使用JavaScript在文本区域中进行字数统计

方法2：基于空格分隔单词，然后计数单词数量。

在这种方法中，通过将单词根据空格字符进行拆分，然后检查每个拆分部分不仅含有空格字符的方式改善了前一方法的缺点。每当用户在文本区域中输入内容时，使用oninput事件处理程序调用countWord()函数。

例子： 此例演示了上述方法。

<body style="text-align: center;">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
  
    <p>
        在文本框中输入文字会自动计算单词数
    </p>
  
    <textarea id="word" oninput="countWord()" rows="10" cols="60">
    </textarea>
    <br><br>
  
    <p> 单词计数：
        <span id="show">0</span>
    </p>
  
    <script>
        function countWord() {
          
            // 获取输入文本的值
            var words = document
                .getElementById("word").value;
          
            // 初始化单词计数器
            var count = 0;
          
            // 按每个空格字符分割单词
            var split = words.split(' ');
          
            // 循环遍历每个单词，
            // 在每个分割的单词不为空时增加计数器
            for (var i = 0; i < split.length; i++) {
                if (split[i] != "") {
                    count += 1;
                }
            }
          
            // 以输出形式显示
            document.getElementById("show")
                .innerHTML = count;
        }
    </script>
</body>

输出结果:

如何使用JavaScript在文本区域中进行字数统计

第三种方法:

由于前两种方法只能在连续书写且有空格分割单词时计数，无法在每个单词从新行开始时计数。所以这种方法将能够计算以新行开始的单词。

示例: 这个示例展示了上述解释的方法。

<body style="text-align: center">
    <h1 style="color: green">GeeksforGeeks</h1>
  
    <p>
        在文本框中输入文字会自动计算单词数
        </p>
  
    <textarea id="word" rows="10" cols="60"> </textarea>
    <br /><br />
  
    <p>
        单词计数:
        <span id="show">0</span>
    </p>
  
    <script>
        document
          .querySelector("#word")
          .addEventListener("input", 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;
          });
    </script>
</body>

输出结果:

如何使用JavaScript在文本区域中进行字数统计