highlight a word in input field [duplicate]

Answer 1

html is not allowed in input type text or textarea.

One way to do this would be to have a content editable div and then search for the text and add a highlight class to the matched text.

For ex.

$('#keyWord').on('input', function (e) {
    var text = $(this).val();
    // escaping string for use in regex
    text = text.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
    var re = new RegExp(text, 'gi');
 
    $('#test').children().each(function () {
        // if no text input clear out previous .highlight spans
        if(!text){
            $(this).html($(this).text());
            return;
        }
        // if match for regex insert .highlight class
        $(this).html($(this).text().replace(re, function(match){
            return ''+ match   +'';
        })); 
    });
});

   .highlight{
  background: red;
}
#test{
  border: 1px solid blue;
}

This is bar


Search text: