从文本输入中突出显示div中所有匹配的单词

Question

我已经创建了一个突出显示div中匹配单词的函数.但是如果有两个相同的单词被不同的单词分隔,那么只有第一个单词是高亮的.因此,例如,如果搜索标准是单词"burn",并且在文本中是"烧伤婴儿烧伤"这个句子,我希望它突出显示"烧伤".这个jsFiddle演示了它如何只突出第一个"刻录".这是下面的代码.任何帮助非常感谢.谢谢阅读.

CSS

.highlight{
            font-weight:bold;
            color:green;
}

HTML

<input id = "search" type ="text" value = "burn">
<div class = "searchable">burn baby burn</div>

JavaScript的

if($('#search').val().length !== 0){
   $('.searchable').each(function(){
   $(this).html($(this).html().replace($('#search').val(),"<span class = 'highlight'>"+$('#search').val()+"</span>"));
 });
}

Answer 1

您可以将正则表达式传递给replace()而不是字符串,使得要使替换的g修饰符执行全局匹配.

if($('#search').val().length !== 0){
   $('.searchable').each(function(){
   var search_value = $("#search").val();
   var search_regexp = new RegExp(search_value, "g");
   $(this).html($(this).html().replace(search_regexp,"<span class = 'highlight'>"+search_value+"</span>"));
 });
}

Answer 2

1. 照顾正则表达式的特殊字符.

2. 保持大写和小写.

所以用不区分大小写的搜索来处理上面的事情(在大多数情况下,这是期望的;否则只需删除"i"),这里是最终的代码......

if ($('#search').val().length !== 0) {
    $('.searchable').each(function() {
        //Handle special characters used in regex
        var searchregexp = new RegExp($("#search").val().replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), "gi");

        //$& will maintain uppercase and lowercase characters.
        $(this).html($(this).html().replace(searchregexp, "<span class = 'highlight'>$&</span>"));
    });
}

还有一个小提琴.