jQuery 中的搜索和突出显示

IT技术 javascript jquery html highlighting
2021-02-08 19:20:08

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

示例 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将搜索的内容包含在跨度内。但只有 div3 突出显示。请帮忙。

4个回答

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,这就像魅力一样。但它区分大小写。你能告诉我如何使这个不区分大小写。
2021-03-19 19:20:08
这将破坏其中的事件#test,因为它innerHTML在后台使用
2021-03-21 19:20:08
在创建 reg exp 时添加 i 以使大小写不敏感 , var pattern = new RegExp("("+term+")", "gi");
2021-03-25 19:20:08
@sarath 如何忽略 DIV 中的 html 内容
2021-04-06 19:20:08
为什么不使用 jQuery$('#test').text()来获取文本?
2021-04-10 19:20:08

演示

脚本

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>
您已从 Johann Burkard 复制代码。你应该提供学分。
2021-03-28 19:20:08
嗨,我正在使用此代码,它可以工作但速度很慢。
2021-04-08 19:20:08
谢谢阿什。如果我的搜索词是“Demo he”,则不会突出显示,因为它们之间有标签。
2021-04-09 19:20:08
重要提示:Johann Burkard 在其网站上提供的源代码中包含了一个挖掘脚本!!!!!!
2021-04-11 19:20:08
因为它们被一些标签分隔..你必须在 1 个标签中定位所有元素,如 <p> 或 <span> 或 <div>..so 脚本将从它搜索结果..
2021-04-12 19:20:08

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

您需要从中删除b标签div1,为了应用粗体属性,您可以使用 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是第 3 方 jquery 库,更多信息在这里:http : //johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

谢谢@wiz 孩子,但我的输入 HTML 文件就是这样。我不应该改变它。
2021-03-31 19:20:08
什么是亮点!我从没见过@Aditya
2021-04-13 19:20:08

在使用 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();到适当的重新突出显示并处理附加的事件
2021-03-18 19:20:08
<script src=" ajax.googleapis.com/ajax/libs/jquery/3.5.1/... > <script type="text/javascript" src=" getbootstrap.com/docs/4.3/dist/js/... > @堆栈('脚本')
2021-03-19 19:20:08