从文本输入中突出显示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. 照顾regex special characters。
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>"));
    });
}

And a fiddle。

Answer 3

这是一个适合你的jsfiddle。基本上，从div中获取文本，将其拆分为空格，循环显示单词并查看是否匹配。

var term = $('#search').val().trim().toLowerCase();
if (term.length > 0) {
    var source = $('.searchable').text();
    var words = source.split(' ');
    var output = '';
    $.each(words, function(idx, word) {
        if (term === word.toLowerCase()) {
            output += '<span class="highlight">' + word + '</span> ';
        } else {
             output += word + ' ';   
        }
    });

    $('.searchable').html(output);
}

Answer 4

使用正则表达式：

• 全局'g'标志替换所有匹配
• 忽略案例'i'以匹配所有案例

别忘了逃避特殊角色

const SEARCH_VALUE = $("#search").val().trim();

if (SEARCH_VALUE.length > 0) {
  $('.searchable').each(function() {
    const DIV_TEXT_CONTENT = $('.searchable').text();
    const SPLIT_CONTENT = DIV_TEXT_CONTENT.split(" ");

    SPLIT_CONTENT.forEach((word, index) => {
      const SEARCH_REGEXP = new RegExp(escapeRegExp(SEARCH_VALUE), "gi")
      if (SEARCH_REGEXP.test(word))
        $(this).html($(this).html().replace(SEARCH_REGEXP, "<span class = 'highlight'>" + word + "               </span>"));
    });
  })
}

function escapeRegExp(text) {
  return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="search" type="text" value="BuRn">
<div class="searchable">burn baby burn</div>