.on('keyup')计算特定单词或短语的.indexof

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

本文关键字：单词 短语 indexof 计算 keyup on      更新时间：2023-09-26

我有一个文本区，当某个单词或短语被输入时，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();
        }
      }
});

然而，在每次上键时，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)
}

你是什么意思?像这样的?

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>

EDIT:您可以通过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，反之亦然

不要使用for循环。用inArray法代替indexOf法

试试这个代码片段:

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' />

希望这对你有帮助!

相关文章：