JQuery 突出显示无法正常工作答案

【问题标题】：JQuery highlight not working properlyJQuery 突出显示无法正常工作
【发布时间】：2015-08-31 11:04:32
【问题描述】：

我正在尝试构建一个功能类似于单词搜索的表单。

我有一个文本区域和一系列包含内容的 div。当用户输入单词或句子时，与 div 内容匹配的单词会以黄色突出显示，而当 text-area 内容被删除或清空时，突出显示也会被删除。

我制作的示例突出显示了单词，但并未完全突出显示。仅突出显示第一个字符。当我尝试搜索一个新词时，之前突出显示的词仍然突出显示。

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

【问题讨论】：

我认为该插件不支持keypress events..
任何其他支持这些事件的插件？？？ @Guruprasad Rao

标签： javascript jquery

【解决方案1】：

查看文档，似乎您可以很好地使用

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

使用input 或keyup 而不是keypress。 http://jsfiddle.net/2vsgbmgz/3/

【讨论】：

【解决方案2】：

宁可使用正则表达式。更容易找到您正在寻找的任何东西。

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

【讨论】：