jQuery搜索高亮显示

方法一

$(function () {//1.获取要高亮显示的行var rowNode = $('.tiBlock_3NhqL');//2.获取搜索的内容var searchContent = $(".searchInput_29REY").val();//3.遍历整行内容，添加高亮颜色rowNode.each(function () {var word = $(this).html();word = word.replace(searchContent, '<span style="color: #c00;">' + searchContent + '</span>');$(this).html(word);});
});

rowNode是全部搜索结果，而searchContent是你具体的搜索文本。

注意：需要引入jQuery

不推荐这种方式，看起来没什么问题，但是有个Bug：

当搜索内容为a的时候，使用var word = $(this).html();获取待查找元素的html代码后，会出现“把span标签中的a替换成<span style="color: #c00;">>...<span>”这样的问题。

我们需要的是仅仅替换文本内容，而不是html代码。 所以来看方法二吧

方法二

这种方法就是使用jquery highlight高亮插件。

去官网下载js文件： jQuery Highlight Plugin | bartaz @ GitHub
下拉到底部的Where to get it?位置下载。

我现在用的是： http://github.com/bartaz/sandbox.js/raw/master/jquery.highlight.js

把这个js文件引用到你的html文件，然后加上样式：

<style>.highlight {background-color: #FFFF88; }
</style>

接着只需要js像这样：$("h1").highlight("highlight"); 就可以高亮搜索文本了。

下面是一个完整实例：

<!DOCTYPE html>
<html><head><title>regex.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../jquery/jquery-1.11/jquery.min.js"></script><script type="text/javascript" src="../jquery/jquery-highlight/jquery-hightlight.js"></script><style>.highlight {background-color: #FFFF88; }</style><script>$(function(){$('#search').click(function(){var key = $('#key').val();if(key != undefined  && key.length > 0) { //注意要判断key是否为undefinedvar body = $('#body');body.removeHighlight();body.highlight(key);} else {alert("请输入关键字！")}});});</script></head><body><div><input id="key" type="text"><input id="search" type="button" value="搜索"></div><div id="head">This is a test head!<div>input the search key.</div><div>click "搜索" button.</div></div><h1>如下是搜索区域!</h1><div id="body">This is a test body!<div>This is a test, a test, test, tes, te, t!Do you know and listen this test, I think you don't know this test!</div><div>这是一个简答的测试,测试.<p>你知道或者听过这个测试吗，我认为你没有听过这个测试！</p></div><div>This is a test, a test, test, tes, te, t!I know't know this test, yes, this test is a not famous test!<p>Follow me test, to test the test! I don't know what do you say?</p></div><div><div>这是一个简答的测试,测试.我不知道这个测试，是的，这不是一个注明的测试，<span>跟随我，去测试这个测试，我都不知道我在说什么！</span></div></div><div>What do you say? test, only a test?<p>你们说什么呢？测试，一个测试？</p></div></div></body>
</html>

参考：

jquery highlight高亮插件使用_赶路人儿-CSDN博客

jQuery搜索高亮显示相关推荐

FlexPaper二次开发问题及搜索高亮显示
原文:FlexPaper二次开发问题及搜索高亮显示最近有个需求,做一个IT知识库,类似于文库,说到文库肯定会用到在线浏览文档了,所有在网上翻阅了一下类似豆丁的在线浏览器插件的资料,将其进行了二次开发 ...
jquery 搜索like_10个jQuery Flash Like菜单
jquery 搜索like 我们都知道Flash可以产生令人愉悦的动画效果,但是我们也知道Flash消耗了不切实际的磁盘空间,这肯定会减慢网站的页面加载速度. 如果您想要这些效果,但又担心网站变慢的机 ...
jquery 搜索框的功能实现
http://www.cnblogs.com/linjiqin/archive/2011/03/18/1988464.html jquery搜索框功能的实现, 1.输入关键字,展示匹配的下拉列表 2. ...
jQuery搜索框自动补全功能插件实现-autocomplete.js
最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...
文本搜索高亮显示
/*** 搜索选中文字高亮* */$(".message_search_right input").keyup(function(){var $this = $(this),se ...
基于Vue实现关键词实时搜索高亮显示关键词
最近在做移动real-time-search于实时搜索和关键词高亮显示的功能,通过博客的方式总结一下,同时希望能够帮助到别人~~~ 如果不喜欢看文字的朋友我写了一个demo方便已经上传到了github ...
Elasticsearch7.6（windows版单机版）api使用及JD搜索高亮显示
Elasticsearch Elasticsearch安装我们需要下载和安装ElasticSearch的服务端和客户端! 注意: ElasticSearch是使用java开发的,且本版本的es需要的 ...
jQuery 图片高亮显示
主要的jQuery代码: 1 $(function() { 2 $("ul li").hover(function() { 3 // over 4 //鼠标移入当前列透明度为1 其 ...
记一次辛酸的ajax+jquery搜索框制作过程
笔者是一个前端菜鸡,所以想模仿制作一个百度搜索框用到自己的项目,通过找csdn文章B站视频终于凑出了一个勉强像样的搜索框. html <!DOCTYPE html> <html l ...

jQuery搜索高亮显示

方法一

方法二

jQuery搜索高亮显示相关推荐

最新文章

热门文章