在jQuery中搜索和突出显示 [英] Search and Highlight in jQuery

问题描述

示例HTML 1：

<$>

我想用jQuery / Java Script搜索并突出显示文本。 p $ p> < div id =div1>< b>良好< / b> < b取代;上午< / B个< / DIV>
< div id =div2>晚上好< / div>
< div id =div3>早安< / div>搜索字符串=早上好


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

 < div id =div1>< span class =highlight><<< b取代;良好的< / b个< b取代;上午< / B个< /跨度>< / DIV> 
< div id =div2>晚上好< / div> 
< div id =div3>< span class =highlight>早安< / span>< / div> 
  

我已经使用了插件https://raw.github.com/bartaz/sandbox.js/master/jquery.highlight.js 将范围内的搜索内容括起来。但只有div3被突出显示。请帮助。

解决方案

http：/ /jsfiddle.net/UPs3V/291/
$ b

  var src_str = $（＃test）。text（ ）; 
 var term =我的文本; 
 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> [^ ||] *）（（< [> +]）+）（[<>]< ; \ /标记>）/， $ 1·/标记> $ 2';标记> $ 4）; 
 
 $（＃test）。html（src_str）; 
  

试试这个可以帮助您

I would like to search and highlight text using jQuery/Java Script.

sample 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"

When i search for String "Good Morning", Both the contents in div1 and div3 should get highlighted. ie. the output html should be

<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>

I have used the plugin https://raw.github.com/bartaz/sandbox.js/master/jquery.highlight.js to enclose searched content inside span. But only div3 is highlighted. Please help.

解决方案

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

try this one it may help you

这篇关于在jQuery中搜索和突出显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！