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

Posted 2023-03-06

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

【英文标题】：highlighting all matching words in div from text input

【发布时间】：2014-04-24 23:31:18

【问题描述】：

我制作了一个函数，可以突出显示 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>"));
 );

【参考方案1】：

使用正则表达式：

全局“g”标志替换所有匹配项 忽略大小写“i”以匹配所有大小写

不要忘记转义特殊字符

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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>

【参考方案2】：

照顾regex special characters。

保持大小写。

所以用不区分大小写的搜索来处理上述事情（在大多数情况下，这是需要的；否则只需删除“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.

【讨论】：

这个答案还处理搜索字符串中的特殊字符。

【参考方案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);

【参考方案4】：

您可以将正则表达式传递给 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>"));
 );