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

Question

I have a textarea that on keyup calls a function when a certain word or phrase has been entered, but also calls another function which undoes the initial function, if the word or phrase is then deleted.

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();
        }
      }
});

However on every keyup the value of indexOf is temporarily set to -1 until it has made its way through the characters and found the offending word.

So this causes doEgg(); and undoEgg(); to be called repeatedly in quick succession, which is not what I want to happen.

Is there any way to calculate .indexOf() but only after the text area has been looked over? So it assigns a value to indexOf() only once.

From what I know onChange doesn't work for what I need as I want the functions to run as the person types rather than when the whole textarea has been completed.

Thanks

EDIT.

The functions being called are:

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

what do you mean? something like this?

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>

or like this:

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: you can set a delay for this with a 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>

those 500 are milliseconds, if you want it to execute more immediately set it closer to 0 and viceversa

Answer 2

Don't use for loop. Instead of indexOf use inArray method.

Try this code snippets:

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

Update:

Use match method like this with 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' />

Hope this helps you!