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

Question

我做了一个突出显示div中匹配单词的函数。但是如果有两个相同的单词被一个不同的单词分隔开，那么只有第一个单词会突出显示。因此，例如，如果搜索条件是单词“burn”，而在文本中是句子“ burn baby burn”，我希望它突出显示两个“
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

您可以使用g修饰符将正则表达式而不是字符串传递给replace（），以使replace执行全局匹配。

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>"));
 });
}