How to count specified words onpaste in the textarea using JS or JQuery?-CodePudding

I'm looking for a way to automatically count the specified words in the textarea without having to click a button to do so, and in that case, auto update it if there are changes..

Here's my chaotic code so far:

function findWord1() {
  var outputDiv = $('#opening-bracket');
  var searchText = $('#textarea3').val();
  var wordMatch = "[";

  outputDiv.empty();

  var m = searchText.match(new RegExp(wordMatch.toString().replace(/(?=[.\\ *?[^\]$(){ }\|])/g, "\\"), "ig"));
  outputDiv.append('<a>'   (m ? m.length : 0)   '</a>');
}

function findWord2() {
  var outputDiv = $('#closing-bracket');
  var searchText = $('#textarea3').val();
  var wordMatch = "]";

  outputDiv.empty();

  var m = searchText.match(new RegExp(wordMatch.toString().replace(/(?=[.\\ *?[^\]$(){}\|])/g, "\\"), "ig"));
  outputDiv.append('<a>'   (m ? m.length : 0)   '</a');
}

function findWord3() {
  var outputDiv = $('#opening-added-bracket');
  var searchText = $('#textarea3').val();
  var wordMatch = "[A>";

  outputDiv.empty();

  var m = searchText.match(new RegExp(wordMatch.toString().replace(/(?=[.\\ *?[^\]$(){}\|])/g, "\\"), "ig"));
  outputDiv.append('<a>'   (m ? m.length : 0)   '</a');
}

function findWord4() {
  var outputDiv = $('#closing-added-bracket');
  var searchText = $('#textarea3').val();
  var wordMatch = "lt;A]";

  outputDiv.empty();

  var m = searchText.match(new RegExp(wordMatch.toString().replace(/(?=[.\\ *?[^\]$(){}\|])/g, "\\"), "ig"));
  outputDiv.append('<a>'   (m ? m.length : 0)   '</a');
}

function findWord5() {
  var outputDiv = $('#opening-deleted-bracket');
  var searchText = $('#textarea3').val();
  var wordMatch = "[D>";

  outputDiv.empty();

  var m = searchText.match(new RegExp(wordMatch.toString().replace(/(?=[.\\ *?[^\]$(){}\|])/g, "\\"), "ig"));
  outputDiv.append('<a>'   (m ? m.length : 0)   '</a');
}

function findWord6() {
  var outputDiv = $('#closing-deleted-bracket');
  var searchText = $('#textarea3').val();
  var wordMatch = "lt;D]";

  outputDiv.empty();

  var m = searchText.match(new RegExp(wordMatch.toString().replace(/(?=[.\\ *?[^\]$(){}\|])/g, "\\"), "ig"));
  outputDiv.append('<a>'   (m ? m.length : 0)   '</a');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<button onclick="findWord1();findWord2();findWord3();findWord4();findWord5();findWord6();">Count</button>

<table>
<thead>
    <tr>
        <th scope="col">Items</th>
        <th scope="col">Count</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>[A&gt;</td>
        <td><a id="opening-added-bracket"></a></td>
    </tr>
    <tr>
        <td>&lt;A]</td>
        <td><a id="closing-added-bracket"></a></td>
    </tr>
    <tr>
        <td>[D&gt;</td>
        <td><a id="opening-deleted-bracket"></a></td>
    </tr>
    <tr>
        <td>&lt;D]</td>
        <td><a id="closing-deleted-bracket"></a></td>
    </tr>
    <tr>
        <td>[</td>
        <td><a id="opening-bracket"></a></td>
    </tr>
    <tr>
        <td>]</td>
        <td><a id="closing-bracket"></a></td>
    </tr>
</tbody>
</table>

<textarea id="textarea3" rows="5">
[A>
lt;A]
[D>
lt;D]
</textarea>

Also if possible, I'd like to retain the "Count" button so I can still manually do it in case the other parts of the code fails..

Apologies if my code looks so bad, but thank you in advance for any help.

CodePudding user response：

Create a function to call all your others. This is a step toward simplifying your code. Then, create an event listener for the textarea's input event with the new function as its callback.

This question is essentially a duplicate of many other questions involving events. See https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events for some good information, and search for more answers here if you have further questions.

function findAllWords() {
  findWord1();
  findWord2();
  findWord3();
  findWord4();
  findWord5();
  findWord6();
}

document.getElementById('textarea3').addEventListener('input', findAllWords);

function findWord1() {
  var outputDiv = $('#opening-bracket');
  var searchText = $('#textarea3').val();
  var wordMatch = "[";

  outputDiv.empty();

  var m = searchText.match(new RegExp(wordMatch.toString().replace(/(?=[.\\ *?[^\]$(){ }\|])/g, "\\"), "ig"));
  outputDiv.append('<a>'   (m ? m.length : 0)   '</a>');
}

function findWord2() {
  var outputDiv = $('#closing-bracket');
  var searchText = $('#textarea3').val();
  var wordMatch = "]";

  outputDiv.empty();

  var m = searchText.match(new RegExp(wordMatch.toString().replace(/(?=[.\\ *?[^\]$(){}\|])/g, "\\"), "ig"));
  outputDiv.append('<a>'   (m ? m.length : 0)   '</a');
}

function findWord3() {
  var outputDiv = $('#opening-added-bracket');
  var searchText = $('#textarea3').val();
  var wordMatch = "[A>";

  outputDiv.empty();

  var m = searchText.match(new RegExp(wordMatch.toString().replace(/(?=[.\\ *?[^\]$(){}\|])/g, "\\"), "ig"));
  outputDiv.append('<a>'   (m ? m.length : 0)   '</a');
}

function findWord4() {
  var outputDiv = $('#closing-added-bracket');
  var searchText = $('#textarea3').val();
  var wordMatch = "lt;A]";

  outputDiv.empty();

  var m = searchText.match(new RegExp(wordMatch.toString().replace(/(?=[.\\ *?[^\]$(){}\|])/g, "\\"), "ig"));
  outputDiv.append('<a>'   (m ? m.length : 0)   '</a');
}

function findWord5() {
  var outputDiv = $('#opening-deleted-bracket');
  var searchText = $('#textarea3').val();
  var wordMatch = "[D>";

  outputDiv.empty();

  var m = searchText.match(new RegExp(wordMatch.toString().replace(/(?=[.\\ *?[^\]$(){}\|])/g, "\\"), "ig"));
  outputDiv.append('<a>'   (m ? m.length : 0)   '</a');
}

function findWord6() {
  var outputDiv = $('#closing-deleted-bracket');
  var searchText = $('#textarea3').val();
  var wordMatch = "lt;D]";

  outputDiv.empty();

  var m = searchText.match(new RegExp(wordMatch.toString().replace(/(?=[.\\ *?[^\]$(){}\|])/g, "\\"), "ig"));
  outputDiv.append('<a>'   (m ? m.length : 0)   '</a');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Count</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>[A&gt;</td>
      <td>
        <a id="opening-added-bracket"></a>
      </td>
    </tr>
    <tr>
      <td>&lt;A]</td>
      <td>
        <a id="closing-added-bracket"></a>
      </td>
    </tr>
    <tr>
      <td>[D&gt;</td>
      <td>
        <a id="opening-deleted-bracket"></a>
      </td>
    </tr>
    <tr>
      <td>&lt;D]</td>
      <td>
        <a id="closing-deleted-bracket"></a>
      </td>
    </tr>
    <tr>
      <td>[</td>
      <td>
        <a id="opening-bracket"></a>
      </td>
    </tr>
    <tr>
      <td>]</td>
      <td>
        <a id="closing-bracket"></a>
      </td>
    </tr>
  </tbody>
</table>

<textarea id="textarea3" rows="5">
[A>
lt;A]
[D>
lt;D]
</textarea>

CodePudding user response：

Use keyup Simply do this way

function countWordFunc() { 

  let myText = document.getElementById("myText").value;

  let wordsArr = myText.trim().split(" ")
  let countWords = wordsArr.filter(word => word !== "").length
  
  let counter = document.getElementById("counter");
  counter.innerHTML = `Total Words: ${countWords}`;

}

<textarea onkeyup="countWordFunc()" id="myText">Hello, World</textarea>

<div id="counter"></div>

CodePudding user response：

Try this, combined functions into one:

    let textarea = $('#textarea3');

    textarea.on('keyup', _ => counting());
    function counting(){
        var searchText = $('#textarea3').val();
    
        let words = [];
        words['['] = '#opening-bracket';
        words[']'] = '#closing-bracket';
        words['[A>'] = '#opening-added-bracket';
        words['lt;A]'] = '#closing-added-bracket';
        words['[D>'] = '#opening-deleted-bracket';
        words['lt;D]'] = '#closing-deleted-bracket';

        for (const word in words) {
            var outputDiv = $(words[word]);
            outputDiv.empty();
            let count = searchText.split(word).length - 1;
            outputDiv.append('<a>'   count   '</a>');
            
        }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="counting();">Count</button>

<table>
    <thead>
        <tr>
            <th scope="col">Items</th>
            <th scope="col">Count</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>[A&gt;</td>
            <td><a id="opening-added-bracket"></a></td>
        </tr>
        <tr>
            <td>&lt;A]</td>
            <td><a id="closing-added-bracket"></a></td>
        </tr>
        <tr>
            <td>[D&gt;</td>
            <td><a id="opening-deleted-bracket"></a></td>
        </tr>
        <tr>
            <td>&lt;D]</td>
            <td><a id="closing-deleted-bracket"></a></td>
        </tr>
        <tr>
            <td>[</td>
            <td><a id="opening-bracket"></a></td>
        </tr>
        <tr>
            <td>]</td>
            <td><a id="closing-bracket"></a></td>
        </tr>
    </tbody>
</table>

<textarea id="textarea3" onpast="counting()" rows="5">
[A>
lt;A]
[D>
lt;D]
</textarea>