highlight a word in input field [duplicate]

Answer 1

Check this Link

This is a jquery plugin and this might help you in achieving your result.

I have used some string functions and setSelectionRange in order to select the text inside a text box.

HTML

<input type="button" value="Select" onmousedown="selectCup(); return false">
 <input type="text" id="select_text">

Js

function selectCup() {

    var search_text = document.getElementById("select_text").value;
    var n = search_text.length;
    var input = document.getElementById("test");
    var input_text = input.value;
    var x = input_text.indexOf(search_text);
    var y = x+n;
    input.focus();
    input.setSelectionRange(x, y); // Highlights "Cup"
};

I have udated in this fiddle

Answer 2

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 '<span class="highlight">'+ match   +'</span>';
        })); 
    });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div contenteditable="true" id="test">
<p>This is bar</p>
</div>
</div>
Search text: <input type="text" id="keyWord" />