如何创建文本区域字数计数器？答案

【问题标题】：How to create a text area word counter?如何创建文本区域字数计数器？
【发布时间】：2018-12-27 01:07:25
【问题描述】：

我创建了几个输入到 JavaScript 命令中以创建自定义句子。用户输入或选择的任何内容都会添加到句子框架中。当用户选择提交时，将在文本区域中创建句子。如何向我的应用程序添加一个计算文本区域内单词的功能？我只想在文本区域的右下角有一个小文本框，说明文本区域中有多少单词。

非常感谢您的帮助！

<!DOCTYPE html>
<html>

  <head>
	<title>Hi</title>

  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

	<style type="text/css">
  table,td,th {margin-left: auto;margin-right: auto}
  .display {display: flex;align-items: center;justify-content: center;}
  p {text-align: center;}
  textarea {display: block;margin-left:auto;margin-right: auto;}
  .chosen-select {width:200px}
	</style>

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

  <script type="text/javascript">

  function sentence() {
    document.getElementById("s1").value = "";// reset
    document.getElementById("s1").style.display = "block";
    document.getElementById("r1").style.display = "block";

    if (document.getElementById("z1").value == "") {
      alert("Year, Make, and Model are needed");
      document.getElementById("z1").focus();
    }

    else {
      const input1 = document.getElementById("z1").value;

            var input3 = $('#z3').val();
            console.log(input3);

            var input3Formatted = "";
            if(input3.length==1){
              // Only one value...
              input3Formatted = input3[0];
            }
            if(input3.length==2){
              // Two values... Just add and "and"
              input3Formatted = input3[0]+" and "+input3[1];
            }
            if(input3.length>2){
              // more than 2 values...
              for(i=0;i<input3.length-1;i++){
                input3Formatted += input3[i]+", ";
              }
              input3Formatted += "and "+input3[input3.length-1];
            }



            const input5 = "It has minor curb rash on the "+input3Formatted+"."
            const input7 = document.getElementById("z5").value;




      document.getElementById("s1").value =
        "This is my " +input1+ ". It is in good condition.The vehicle's rims have curb rash. "+input5+" The "+input1+"'s color is "+input7+"."

    }
  }

  function reset() {
    document.getElementById("s1").value = "";
  }
</script>

<script type="text/javascript">
  $(function() {
    $(".chosen-select").chosen({
      disable_search_threshold: 4
    })
});
</script>


  </head>

  <body>
    <table>
      <tr>
        <td>
          <input type="text" id="z1" placeholder="Year, Make, Model" name="name" maxlength="100" >
        </td>
        <td>
            <select data-placeholder="Minor Curb Rash" name="minorrash" multiple class="chosen-select" id="z3">
              <option value=""></option>
              <option value="front left rim">Front Left Rim</option>
              <option value="back left rim">Back Left Rim</option>
              <option value="front right rim">Front Right Rim</option>
              <option value="back right rim">Back Right Rim</option>
            </select>
          </td>
          <td>
            <input type="text" id="z5" placeholder="Color" name="name" maxlength="100">
          </td>
        </tr>
    </table>
    <br>
    <div class="display">
      <button onclick="sentence()"> Submit </button>
    </div>
    <hr>
    <br>
    <textarea rows="10" cols="100" id="s1"></textarea>
    <br>

    <div class="display">
      <button onclick="reset()" id="r1">Reset</button>
    </div>

  </body>
</html>

【问题讨论】：

Counting and limiting words in a textarea的可能重复

标签： javascript jquery html word-count

【解决方案1】：

我不知道这是不是你在尝试的，这是我对你的问题的理解：

<script type="text/javascript">

  var nameValidationInput = document.getElementById('s1');//here you search in your text area al the words
  function useValue() {
  var NameValue = nameValidationInput.value;
  document.getElementById("demo").innerHTML = NameValue.split(" ").length // here you count the word separated by a space
  }
</script>
<br>
<textarea rows="1" cols="5" id="demo"></textarea>// just to show the count in the text area
<br>

通过这种方式，该函数将计算每个以空格分隔的单词（如果您想要更详细的内容，如果会更困难）

【讨论】：

【解决方案2】：

嗯，最简单的方法是将 textarea 中的所有文本存储在一个数组中（由空格分隔）。您可以使用.split 来实现这一点。完成后，只需获取数组的长度。它将返回世界计数。试试这个。

var splitData = textarea.value.split(" ");
var wordCount = splitData.length;

【讨论】：

【解决方案3】：

我将留下另一个版本的建议。使用长度是不够的，因为它会将每个空格都计为一个单词，并且在开始时它会计算 1 个单词，即使它是空的。我建议使用 trim() 和 filter 来防止这些错误，例如：

wordsArr = text.trim().split(" ")
wordsArr.filter(word => word !== "").length

【讨论】：