JQuery突出显示无法正常工作

Question

Reference

I am trying to build a form with the functionality something similar to word search.

I have a text-area and a series of divs with contents. When a user types a word or a sentence, the words that match with the div contents are highlighted in yellow and when text-area content is removed or emptied, highlighting is also removed.

The sample that I made highlights the words but doesn't highlight it completely. Only first character is highlighted. And when I try to search for a new word, previously highlighted words are still highlighted.

HTML

<textarea id="my_ta" name="my_ta"></textarea>
<hr>
    Similiar Words
<hr>
<div>
    This is a serious question   
</div>
<div>
    Does this question ring a bell inside your head?
</div>    
<div>
    This question is a question about questions    
</div>   

CSS

.highlight { background-color: yellow }

JavaScript

$(document).ready(function(){
    $('#my_ta').keypress(function()
    {                                           
        var value = $(this).val();
        if(value)
        {
            $('div').highlight(value); 
        }
        else
        {
          $('.highlight').removeHighlight();
        }
    });        
 });

FIDDLE

Answer 1

Looking at the documentation, seems that you'de be good to go just with

$(document).ready(function(){
    $('#my_ta').on('input',function(){
        $('div').removeHighlight().highlight($(this).val()); 
    });        
});

Use input or keyup instead of keypress . http://jsfiddle.net/2vsgbmgz/3/

Answer 2

Rather use Regular Expressions. It's easier to find anything you're looking for.

---

HTML

<div>
You can have any text inside a <div>
or any valid html tag you want. 
</div>

---

CSS

#highlight {
    background-color: red
}

---

jQuery

function highlight() {
    $.each($('div'), function() {
        //-------------------------Get Text
        var str = $(this).html();
        //-------------------------Wrap Matching Text
        str = str.replace(/hi/ig, '<span id="highlight">$&</span>');
        //-------------------------Insert Coloured Text
        $(this).html(str);
    });
}
highlight();

jsFiddle