.on('keyup') 计算某个单词或短语的.indexOf

Question

我有一个文本区域，当输入某个单词或短语时，它会在 keyup 上调用一个函数，但如果单词或短语随后被删除，也会调用另一个函数来撤消初始函数。

var phraseList = [
    "foo foo",
    "foobar",
    "foobity foofoo foo"
];


$("#id_message").on('keyup', function(){
      for(var i=0;i<phraseList.length;i++){
        if($('#id_message').val().toLowerCase().indexOf(phraseList[i]) > -1){
            doEgg();
        }else{
            undoEgg();
        }
      }
});

然而，在每个 keyup 上，indexOf 的值被临时设置为 -1，直到它遍历字符并找到有问题的词。

所以这会导致 doEgg();和 undoEgg();被快速连续地重复调用，这不是我想要发生的。

有什么方法可以计算 .indexOf() 但只能在文本区域被查看后才能计算？所以它只给 indexOf() 赋值一次。

据我所知，onChange 不能满足我的需要，因为我希望这些功能运行在人输入时而不是在整个文本区域完成时。

谢谢

编辑。

正在调用的函数是：

function doEgg(){
    // if(changeback)clearInterval(changeback);
    audioElement.play();
    // var change = setInterval(function () {
    change = setInterval(function () {
            var all = $('#wall_container').find('img').not('.easter');
            var random = Math.floor(Math.random()*all.length)
            var Rimg = $( all[random] )
            var cdown = all.length;
            var r = 1+Math.floor(Math.random()*33);

            Rimg.attr('data-oldsrc', Rimg.attr('src')).attr('src', 'http://localhost:8888/wp-content/uploads/crying/crying'+r+'.gif').addClass('easter');

            if(cdown==0){
                clearInterval(change);                    
            }

        }, 500)
}

function undoEgg(){
    // if(change)clearInterval(change);
    audioElement.pause();
    // var changeback = setInterval(function () {
    changeback = setInterval(function () {
        var all = $('#wall_container').find('img').filter('.easter');
        var random = Math.floor(Math.random()*all.length)
        var Rimg = $( all[random] )
        var cdown = all.length;

        Rimg.attr('src', Rimg.attr('data-oldsrc')).removeClass('easter');

        if(cdown==0){
            clearInterval(changeback);
        }
    }, 500)
}

Answer 1

你是什么意思？是这样的吗？

var phraseList = [
    "foo foo",
    "foobar",
    "foobity foofoo foo"
];

$(function() {
  $("#id_message").on('keyup', function() {
      $("#result").empty();
      for(var i=0;i<phraseList.length;i++) {
        if($('#id_message').val().toLowerCase().indexOf(phraseList[i]) > -1){
            $("#result").append("found<br>");
        } else {
            $("#result").append("not found<br>");
        }
      }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input id="id_message">
<div id="result"></div>

或者像这样：

var phraseList = [
    "foo foo",
    "foobar",
    "foobity foofoo foo"
];

$(function() {
  $("#id_message").on('keyup', function() {
      var $result = $("#result").empty();
      var val = this.value.toLowerCase();
      var words = phraseList.filter(function(e,i){ return val.indexOf(e)> -1 });
      if(words.length) {
        $result.append("found<br>");
      } else {
        $result.append("not found<br>");
      }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input id="id_message">
<div id="result"></div>

编辑： 您可以为此设置延迟 timeout：

var phraseList = [
    "foo foo",
    "foobar",
    "foobity foofoo foo"
];

$(function() {
  var timeout = 0;
  
  $("#id_message").on('keyup', function() {
      clearTimeout(timeout);
      var $result = $("#result").empty();
      var val = this.value.toLowerCase();
      var words = phraseList.filter(function(e,i){ return val.indexOf(e)> -1 });
      timeout = setTimeout(function(){
        if(words.length) {
          $result.append("found<br>");
        } else {
          $result.append("not found<br>");
        }
      }, 500);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input id="id_message">
<div id="result"></div>

那些500是毫秒，如果你想让它更立即执行，把它设置得更接近0，反之亦然

Answer 2

不要使用 for 循环。而不是 indexOf 使用 inArray 方法。

试试这个代码片段：

var phraseList = [
    "foo foo",
    "foobar",
    "foobity foofoo foo"
];


$("#id_message").on('keyup', function () {
    var value = $('#id_message').val();
    if ($.inArray(value, phraseList) != -1) {
        doEgg();
    } else {
        undoEgg();
    }
});
function doEgg() {
    alert("do");
}
function undoEgg() {
    alert("undo");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type='text' id='id_message' />

更新：

使用 match 这样的方法与 RegEx。

var phraseList = [
    "foo foo",
    "foobar",
    "foobity foofoo foo"
];


$("#id_message").on('keyup', function () {
    var value = $('#id_message').val().toLowerCase(),
        flag = [];
    flag = $.map(phraseList, function (val) {
        var re = new RegExp("\b" + val + "\b","g");
        if (value.match(re))
            return val;
    });
    if (flag.length)
        doEgg();
    else
        undoEgg();
});
function doEgg() {
    alert("do");
}
function undoEgg() {
    alert("undo");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type='text' id='id_message' />

希望对您有所帮助！

.on('keyup') 计算某个单词或短语的.indexOf

.on('keyup') calculate the .indexOf a certain word or phrase

javascript

jquery

textbox

indexof