坏词捕手Javascript

时间:2018-02-17 03:22:25

标签: javascript arrays loops dom output

我正在尝试使用文本字段创建一个从用户那里获取输入的应用程序。将字符串拆分为空格并在字符串中查找错误的单词。如果找到坏词,则在DOM上输出结果。

我一直在找一张表格而找不到。我找到了一些PHP,但这对我没有帮助。我相信我有正确的伪代码。一些指导会有所帮助。

HTML如下:

<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如下:

    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
    }

2 个答案:

答案 0 :(得分:4)

您可以.filter使用arr来查看它是否包含badWords中的任何字词。

&#13;
&#13;
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;
  
  
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您可以在jQuery.inArray

中使用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>