Bad Word Catcher Javascript

Question

I am trying to create an application that takes input from a user using a text field. Split the string into the spaces and look for bad words in the string. If the bad word is found output results on the DOM.

I have been looking on for a form and could not find one. I found some PHP ones but that does not help me. I believe I have the correct pseudocode. Some guidance would be helpful.

HTML is 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 is 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
    }

May just be a typo but you're not actually calling the function in the html provided. — Will Ru, Feb 17 '18 at 03:35

void · Answer 1 · 2018-02-17T03:56:27.333

4

You can use .filter on arr to 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>

edited Feb 17 '18 at 03:56

answered Feb 17 '18 at 03:32

void

36,090
8
62
107

1

The one thing you will have to catch here is the cases where people can change the case of the input text, so if you're trying to catch bad words, then you will need to do a string-insensitive comparison instead. – th3n3wguy Feb 17 '18 at 03:38
1

@th3n3wguy makes sense! Edited. – void Feb 17 '18 at 03:45
@void the .filter makes sense to me. great approach. could you explain the "el." in (el.toLowerCase())). – king_coney Feb 17 '18 at 03:52
@king_coney `el.toLowerCase()` will convert the current input text to lowercase so that the text comparison can be string insensitive. You can also apply this `.toLowerCase()` to `wordInput` like `wordInput = wordInput.toLowerCase()` – void Feb 17 '18 at 03:55
@void if I wanted to the DOM to say "Bad words were found" or "No bad words were found" instead of printing the words out. what approach should I do? if function or create a new var and use str.includes? – king_coney Feb 17 '18 at 04:08

Rafiqul Islam · Answer 2 · 2018-02-17T04:51:08.650

You can use jQuery.inArray inside a for 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>

Bad Word Catcher Javascript

2 Answers2