坏词捕捉器 Javascript答案

【问题标题】：Bad Word Catcher Javascript坏词捕捉器 Javascript
【发布时间】：2018-07-28 00:00:10
【问题描述】：

我正在尝试创建一个使用文本字段从用户那里获取输入的应用程序。将字符串拆分为空格并在字符串中查找坏词。如果找到坏词，则在 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
    }

【问题讨论】：

可能只是一个错字，但您实际上并没有在提供的 html 中调用该函数。

标签： javascript arrays loops dom output

【解决方案1】：

您可以在arr 上使用.filter 来查看它是否包含来自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>

【讨论】：

您必须在此处捕获的一件事是人们可以更改输入文本的大小写的情况，因此，如果您要捕获坏词，则需要做一个字符串- 不敏感的比较。
@th3n3wguy 有道理！已编辑。
@void .filter 对我来说很有意义。很好的方法。你能解释一下“el”吗？在 (el.toLowerCase())) 中。
@king_coney el.toLowerCase() 会将当前输入的文本转换为小写，以便文本比较可以不区分字符串。您也可以将此.toLowerCase() 应用于wordInput，例如wordInput = wordInput.toLowerCase()
@void 如果我想对 DOM 说“发现坏词”或“没有发现坏词”而不是打印出来。我应该怎么做？ if 函数或创建一个新的 var 并使用 str.includes？

【解决方案2】：

您可以在for loop 中使用jQuery.inArray

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>

【讨论】：