使用 jquery 从 keyup 上的文本区域返回匹配的文本

Question

我有一个文本区域，我想监视 keyup 上匹配单词或短语的预定义列表。我可以按如下方式实现此目的，但我遇到的问题是为用户显示匹配的单词和/或短语。例如，如果用户键入"test，test two"，我将如何从 grep 语句返回这些匹配的项目进行显示（或通过其他方法）？- 即有一个div 更新为"请避免使用以下单词和/或短语：test1，test two"的内容。

    function isBanned(array, name){
      return $.grep(array, function(i){
        return name.indexOf(i) >= 0;
      }).length > 0;
    }
    var bannedInput = ['test1','test two'];
    $('#eventText').keyup(function(){
      var inputVal = $('#eventText').val();
      var match = isBanned(bannedInput, inputVal.toLowerCase());
      if(match){
        alert("match found"); 
      }
    }); 

Answer 1

尝试

var input = $("#eventText"),
    output = $("[for=eventText]"),
    bannedInput = ["test1", "test two"];
input.on("keyup", function (e) {
    var name = e.target.value.toLowerCase()
    , match = $.grep(bannedInput, function (value) {
        return new RegExp(value).test(name)
    });
    if (!!match.length) {
        output.append(
          "<br />Please avoid using the following words and/or phrases: " 
          + "<span class=banned>"" 
          + match.join(match.length === 1 ? " " : ""<i>,</i> "") 
          + ""</span>")
    } else {
        output.empty()
    }
});

var input = $("#eventText"),
    output = $("[for=eventText]"),
    bannedInput = ["test1", "test two"];
input.on("keyup", function (e) {
    var name = e.target.value.toLowerCase()
    , match = $.grep(bannedInput, function (value) {
        return new RegExp(value).test(name)
    });
    if (!!match.length) {
        output.append(
          "<br />Please avoid using the following words and/or phrases: " 
          + "<span class=banned>"" 
          + match.join(match.length === 1 ? " " : ""<i>,</i> "") 
          + ""</span>")
    } else {
        output.empty()
    }
});

i {
    color:rgb(0, 0, 0);
}
.banned {
    color:rgb(0, 0, 255);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="eventText" /><output for="eventText"></output>

Answer 2

$.map可能会有所帮助：

function isBanned(bannedWords, input){
  return $.map(bannedWords, function(n, i){
    return input.indexOf(n) >= 0 ? n : 0;
  }
}    

isBanned将返回一个数组，该数组的条目要么是禁止字，要么是 0。然后，您可以使用$.grep获取在输入中找到的禁止单词数组：

var filteredWords = isBanned(bannedInput, inputVal.toLowerCase());
var bannedWords = $.grep(filteredWords, function(n, i) {return n !== 0});