首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在jQuery中搜索和突出显示

在jQuery中搜索和突出显示
EN

Stack Overflow用户
提问于 2013-11-01 12:50:02
回答 1查看 59.4K关注 0票数 22

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

示例HTML 1:

代码语言:javascript
复制
<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"

当我搜索字符串"Good Morning“时,div1和div3中的内容都应该突出显示。即。输出的html应该是

代码语言:javascript
复制
<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高亮显示。请帮帮忙。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-11-01 12:58:17

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

代码语言:javascript
复制
 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);

试试这个,可能会对你有帮助。

票数 44
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19720984

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档