在 jQuery 中搜索和突出显示

Posted 2023-03-06

【中文标题】在 jQuery 中搜索和突出显示

【英文标题】：Search and Highlight in jQuery

【发布时间】：2013-11-12 07:30:26

【问题描述】：

我想使用 jQuery/Java 脚本搜索和突出显示文本。

示例 html 1：

<div id="div1"><b>Good</b> <b>Morning</b> </div>
<div id="div2">Good Evening</div> 
<div id="div3">Good Morning</div>Searched String = "Good Morning"

当我搜索字符串“早安”时，div1 和 div3 中的内容都应该突出显示。 IE。输出 html 应该是

<div id="div1"><span class="highlight"><b>Good</b> <b>Morning</b> </span></div>
<div id="div2">Good Evening</div> 
<div id="div3"><span class="highlight">Good Morning</span></div>

我使用插件https://raw.github.com/bartaz/sandbox.js/master/jquery.highlight.js 将搜索到的内容包含在 span 中。但只有 div3 突出显示。请帮忙。

【问题讨论】：

如果你有其他标签，你怎么知道要包装什么？您必须先解开单词然后突出显示它们，或者根据您的需要修改插件。

【参考方案1】：

http://jsfiddle.net/UPs3V/291/

 var src_str = $("#test").text();
var term = "my text";
term = term.replace(/(\s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
var pattern = new RegExp("("+term+")", "gi");

src_str = src_str.replace(pattern, "<mark>$1</mark>");
src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/,"$1</mark>$2<mark>$4");

$("#test").html(src_str);

试试这个可能对你有帮助

【讨论】：

感谢@sarath，这很有魅力。但它区分大小写。你能告诉我如何让它不区分大小写吗？

在创建 reg exp 时添加了 i 以使大小写不敏感 , var pattern = new RegExp("("+term+")", "gi");

为什么不用jQuery的$('#test').text()来获取文本呢？

这将销毁#test 中的事件，因为它在后台使用innerHTML

@sarath 如何忽略 DIV 中的 html 内容

【参考方案2】：

demo

脚本

jQuery.fn.highlight = function(pat) 
 function innerHighlight(node, pat) 
  var skip = 0;
  if (node.nodeType == 3) 
   var pos = node.data.toUpperCase().indexOf(pat);
   if (pos >= 0) 
    var spannode = document.createElement('span');
    spannode.className = 'highlight';
    var middlebit = node.splitText(pos);
    var endbit = middlebit.splitText(pat.length);
    var middleclone = middlebit.cloneNode(true);
    spannode.appendChild(middleclone);
    middlebit.parentNode.replaceChild(spannode, middlebit);
    skip = 1;
   
  
  else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) 
   for (var i = 0; i < node.childNodes.length; ++i) 
    i += innerHighlight(node.childNodes[i], pat);
   
  
  return skip;
 
 return this.each(function() 
  innerHighlight(this, pat.toUpperCase());
 );
;

jQuery.fn.removeHighlight = function() 
 function newNormalize(node) 
    for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) 
        var child = children[i];
        if (child.nodeType == 1) 
            newNormalize(child);
            continue;
        
        if (child.nodeType != 3)  continue; 
        var next = child.nextSibling;
        if (next == null || next.nodeType != 3)  continue; 
        var combined_text = child.nodeValue + next.nodeValue;
        let new_node = node.ownerDocument.createTextNode(combined_text);
        node.insertBefore(new_node, child);
        node.removeChild(child);
        node.removeChild(next);
        i--;
        nodeCount--;
    
 

 return this.find("span.highlight").each(function() 
    var thisParent = this.parentNode;
    thisParent.replaceChild(this.firstChild, this);
    newNormalize(thisParent);
 ).end();
;

HTML

Search: <input type="text" id="text-search" />

<p><b>Demo </b> he new edition of KnowlEdge K12 enables your school with flexibility by wholly automating their administrative and academic processes. With IncTech’s solution for K12 schools, you can. We give you an internal infrastructure so you can share school and student information. </p>

<script type="text/javascript">
$(function() 
    $('#text-search').bind('keyup change', function(ev) 
        // pull in the new value
        var searchTerm = $(this).val();

        // remove any old highlighted terms
        $('body').removeHighlight();

        // disable highlighting if empty
        if ( searchTerm ) 
            // highlight the new term
            $('body').highlight( searchTerm );
        
    );
);
</script>

【讨论】：

谢谢阿什。如果我的搜索词是“Demo he”，因为它们之间有一个标签，所以它没有突出显示。

因为它们被一些标签隔开..你必须找到 1 个标签中的所有元素，如

您从 Johann Burkard 那里复制了代码。您应该提供学分。

您好，我正在使用此代码，它可以工作但速度很慢。

重要提示：Johann Burkard 在其网站上提供的源代码中包含了一个挖矿脚本！！！！！！

【参考方案3】：

试试这个：- http://jsfiddle.net/adiioo7/H7CqV/

您需要从div1 中删除b 标签，并且为了应用粗体属性，您可以使用css 属性font-weight:bold。

HTML：-

<div id="div1" style="font-weight:bold">Good Morning</div>
<div id="div2">Good Evening</div> 
<div id="div3">Good Morning</div>

或

<div id="div1"><b>Good Morning</b></div>
<div id="div2">Good Evening</div> 
<div id="div3">Good Morning</div>

JS：-

$("body").highlight("Good Morning");

编辑：highlight 是一个第三方 jquery 库，更多信息在这里：http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

【讨论】：

谢谢@wiz 孩子，但我输入的 HTML 文件就是这样。我不应该改变它。

什么是亮点！我从没见过@Aditya

【参考方案4】：

在以上所有使用 HTML 标记的答案搜索中试试这个。

又短又甜

这个答案对我在项目中实现的完美搜索文本很有帮助

<script type="text/javascript">
   var term = "my text";
   $('#test').html(function () 
     return $(this).html().replace(new RegExp(term + "(?=[^>]*<)","ig"), "<mark>$&</mark>");
   );
</script>

【讨论】：

必须将此$('mark').contents().unwrap(); 添加到适当的重新突出显示并处理附加的事件