How to create a text area word counter?

Question

I created a couple inputs that feed into a JavaScript command to create custom sentences. Whatever the user inputs or selects is added to a sentence framework. When the user selects submit, the sentence is created in a textarea. How can I add a feature to my app that counts the words within the textarea? I simply want a small text box to the bottom right of the text area that states how many words are in the text area.

Thanks so much for your help!

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

Possible duplicate of [Counting and limiting words in a textarea](https://stackoverflow.com/questions/17909646/counting-and-limiting-words-in-a-textarea) — gforce301, Jul 19 '18 at 02:20

score 2 · Answer 1 · answered Jul 19 '18 at 03:46

i don t know if this is what are you trying, this is what I understood of your question:

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

in this way the function will count each word separated for a space (if you want something more detailed if will be a much more dificult)

score 1 · Answer 2 · answered Jul 19 '18 at 02:48

Well, the simplest way to do it is to store all the text from the textarea in an array (separated by white spaces). You can use .split to achieve that. Once done, then simply get the length of the array. It'll return the world count. Try this.

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

score 1 · Answer 3 · answered Sep 01 '20 at 16:49

I will leave a another version of what was sugested. Using length is not enough because it will count every whitespace as a word, and at the begining it will count 1 word even when its empty. I sugest using trim() and filter to prevent those bugs, for example:

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

How to create a text area word counter?

3 Answers3