静态html页面关键字搜索高亮
2024-04-17 06:27:35
静态html页面关键字搜索高亮
最近项目要实现一个页面关键字搜索，刚好上网找了一款不错的插件，叫mark.js,官网地址,下面演示一个基于jq的案列，这个插件可以不依赖任何插件也可以实现这个功能，详情见官网例子。
基于jq的小小例子：
<!DOCTYPE>
<html><head><title> new document </title><meta name="generator" content="editplus" /><meta name="author" content="" /><meta name="keywords" content="" /><meta name="description" content="" /><style type="text/css">mark {background: orange;color: black;}</style></head><body><input type="text" value="test"><div id="context">Lorem test ipsum dolor sit āmet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, one, nò sea takimata 1 sanctus est Lorem ipsum dolor sit amet. Lörem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam lorem ipsum nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lore'm ipsu%m dolor sit amet. Lo!rem ipsum.Lorem ipsum dolor sit āmet, test consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, one, nò sea takimata 1 sanctus est Lorem ipsum dolor sit amet. Lörem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam lorem ipsum nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lore'm ipsu%m dolor sit amet. Lo!rem ipsum.Lorem ipsum dolor sit āmet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, one, nò sea takimata 1 sanctus est Lorem ipsum dolor sit amet. Lörem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam lorem ipsum nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lore'm ipsu%m dolor sit amet. Lo!rem ipsum.</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script><script type="text/javascript">$(function() {$("input").on("input.highlight", function() {// Determine specified search termvar searchTerm = $(this).val();// Highlight search term inside a specific context$("#context").unmark().mark(searchTerm);}).trigger("input.highlight").focus();});</script></body>
</html>
大家可以copy到本地运行一下，看一下效果,这样就实现关键字搜索了。
静态html页面关键字搜索高亮相关推荐
- 搜索关键字高亮_SpringBoot+Mybatis-Plus+Elasticsearch 实现关键字搜索高亮展示
一.概述&介绍 Elasticsearch:Elasticsearch 是基于Lucense 技术的搜索引擎(服务器),将数据进行缓存再进行查询. 与数据库查询的比较: (1)相当于sql ...
- vue前端实现关键字搜索高亮
实现效果 数据格式: keyList:[ {"name":"刘XX","posy":"VP"}, {"name ...
- 富文本关键字搜索高亮，解决方法及优化（收藏！）
大厂技术 高级前端 Node进阶 点击上方 程序员成长指北,关注公众号 回复1,加入高级Node交流群 作者:猿猴望月 原文:https://juejin.cn/post/707068849792 ...
- JavaScript 利用搜索引擎引用高亮页面关键字
当在使用大多数的网页搜索引擎的"网页快照"功能时,都会在返回的快照页面中加入关键字高亮的功能.这将非常方便查找网页中被检索的内容,其中 google 快照的关键字高亮还融入了分词功 ...
- 小程序-输入关键字搜索，关键字在搜索列表中高亮效果
这里写自定义目录标题 小程序-输入关键字搜索,关键字在搜索列表中高亮效果 小程序-输入关键字搜索,关键字在搜索列表中高亮效果 第一步:按照网上大神写的思路,在截取首位关键字空格方法 出现找不到repl ...
- 页面关键字实时搜索查询案例
实时搜索,先来看一下效果吧 如果这是你需要的效果: 直接上代码 如果不喜欢看文字的朋友,我写了个demo已经上传到github,可以直接clone下来看代码 https://github.com/Me ...
- 使用HttpClient和Jsoup爬取京东商城关键字搜索的商品页面
使用HttpClient可以创建浏览器对象,然后对页面数据进行抓取,另外再使用Jsoup库解析Html页面.因为Jsoup和JQuery一样有选择器获取元素的方式,所以抓取页面数据变得非常方便. 例如 ...
- linux vim 高亮查找,vim搜索高亮关键字怎么取消,vim查询高亮搜索显示如何清除取消...
如果我们在在打开的文件中使用Vim搜索功能并开启搜索高亮显示后怎么取消当前高亮显示搜索关键字呢? vim搜索高亮关键字如何取消,vim清除查询高亮搜索显示的方法 下面站长为大家介绍vim搜索高亮关键字 ...
- WPF 实现 RichTextBox 关键字查询高亮
WPF 实现 RichTextBox 关键字查询高亮 一.环境说明 二.代码 三.演示结果 四.参考资料 导言:我想实现一个简单的载入RTF文件到RichTextBox 中并可以查找关键字,并高亮关键 ...
最新文章
- 打开某网站无法访问出现空白页可能的原因
- 中国18岁美女机器人：出得厅堂，下得厨房，还要什么女朋友！
- Element 'dependency' cannot have character [children]
- 最新的Java SE平台和JDK版本发布计划
- [BZOJ 1047] [HAOI2007] 理想的正方形 【单调队列】
- 51nod1743-雪之国度【最小生成树,LCA,并查集】
- 马云向日本捐赠100万只口罩：这是许多中国人的心意！
- 在ASP.NET中使用FCKeditor V2
- mysql 层_mysql各个层面优化
- Java1.8安装win10_java1.8环境配置+win10系统
- Power Designer的4种模型文件
- flash 转 html5 工具_转
- 两个画图工具助力论文绘图
- Rclone 连接 Google Drive
- 如何应对工作中的冲突？
- 淘宝 Android 端图片体验优化实践
- 史上最全Android性能优化方案解析
- Kafka节点服役和退役
- 数说亚洲杯小组赛：冷门四宗“最”知多少？
- 使用signapk工具给apk系统签名