Bad Word Catcher Javascript

Question

Bad Word Catcher Javascript

I am trying to create an application that enters data from a user using a text box. Separate the string into spaces and find the bad words in the string. If a bad word is found, the results are displayed in the DOM.

I was looking for a form and could not find it. I found some PHP, but that does not help me. I believe that I have the correct pseudocode. Some recommendations will be helpful.

HTML below:

<body>

<input type="text" id="wordInput"/>
    <button id="badWordCatch" onclick="badWordCatch;">Catch Bad Words</button>
    <div id="wordsFound"></div>
    <div id="wordAmount"></div>
</body>

Javascript below:

    1. What words are put it
    2. if the words are bad or not
    */

    function badWordCatch(){

        var wordInput = document.getElementById("wordInput").value;

        // split the words by spaces (" ")
        var arr = wordInput.split(" ");
        // bad words to look for
        var badWords = ["legos", "cloud", "manifold"];


        //find bad words from the input
        //output on the dom "if bad words were found" 
        //output on the dom how many bad words were found
    }

+4

javascript dom arrays loops output

king_coney Feb 17 '18 at 3:22

source share

2 answers

void · Answer 1 · 2018-02-17T03:32:04+0000

You can use .filterin arrto see if it contains any word from badWords.

function badWordCatch() {

  var wordInput = document.getElementById("wordInput").value;
  wordInput = wordInput.toLowerCase();

  // split the words by spaces (" ")
  var arr = wordInput.split(" ");
  // bad words to look for, keep this array in lowercase
  var badWords = ["legos", "cloud", "manifold"];
  
  // .toLowerCase will do the case insensitive match!
  var foundBadWords = arr.filter(el => badWords.includes(el));
  
  document.getElementById("wordsFound").innerHTML = foundBadWords.join(", ");
  document.getElementById("wordAmount").innerHTML = foundBadWords.length;
  
  
}

<input type="text" id="wordInput" value="legos happy manifold" />
<button id="badWordCatch" onclick="badWordCatch()">Catch Bad Words</button>
<div id="wordsFound"></div>
<div id="wordAmount"></div>

Run code Hide result

Rafiqul islam · Answer 2 · 2018-02-17T04:10:46+0000

You can use jQuery.inArrayinsidefor loop

function badWordCatch(){

        var wordInput = document.getElementById("wordInput").value;

        // split the words by spaces (" ")
        var arr = wordInput.split(" ");
        // bad words to look for
        var badWords = ["legos", "cloud", "manifold"];
         var index , totalWordAmount = 0, totalWordsFoundList = '';
         for(index=0;index<arr.length; ++index){
         if(jQuery.inArray( arr[index], badWords ) > -1){
           totalWordAmount = totalWordAmount + 1;
           totalWordsFoundList = totalWordsFoundList+' '+ arr[index]; 
          // alert(arr[index])
         }
         //alert(totalWordsFoundList)
         }
         //alert(totalWordsFoundList)
         document.getElementById("wordsFound").innerHTML = totalWordsFoundList;
         document.getElementById("wordAmount").innerHTML = totalWordAmount;
          

        //find bad words from the input
        //output on the dom "if bad words were found" 
        //output on the dom how many bad words were found
    }

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

<input type="text" id="wordInput"/>
    <button id="badWordCatch" onclick="badWordCatch();">Catch Bad Words</button>
    <div id="wordsFound"></div>
    <div id="wordAmount"></div>
</body>

Run code Hide result

Bad Word Catcher Javascript

More articles: