静态html页面关键字搜索高亮

最新推荐文章于 2024-05-12 09:39:11 发布
最新推荐文章于 2024-05-12 09:39:11 发布
阅读量7.2k 收藏 14
点赞数 3
分类专栏： javascript web前端之路 文章标签： html关键字搜索 搜索 插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tanzhenyan/article/details/77689690
版权

静态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 lor­em 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 lor­em 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 lor­em 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 term
            var searchTerm = $(this).val();
            // Highlight search term inside a specific context
            $("#context").unmark().mark(searchTerm);
        }).trigger("input.highlight").focus();
    });

</script>
    </body>
</html>

大家可以copy到本地运行一下，看一下效果,这样就实现关键字搜索了。
这里写图片描述

十七度的夏天
关注
  • 3
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
html页面 关键字高亮,HTML高亮关键字的完美解决方案
weixin_29061465的博客
06-03 3055
最近做项目遇到这样的一个功能：在网页中高亮关键字。本以为一个 innerHTML replace 就能实现的简单操作，却遇到了许多的问题。本文就记录这些问题和最终的完美解决办法， 希望能对有同样遭遇的小伙伴有所帮助。只对结果感兴趣的，忽略过程，直接跳过看结果吧~常用做法：正则替换思路：要想高亮元素，那么需要将关键字提取出来用标签包裹，然后对标签进行样式调整。使用 innerHTML，或 outHT...
JS实现关键词高亮：在HTML字符串中匹配“跨标签关键词”
携手天下
11-25 2408
本文发布于个人网站：https://wintc.top/article/59，转载请注明 很久之前（好像刚好是一年前）写过一个Vue组件，匹配文本内容中的关键词高亮，类似浏览器ctrl+f搜索结果。实现方案是，将文本字符串中的关键字搜索出来，然后使用特殊的标签（比如font标签）包裹关键词替换匹配内容，最后得到一个HTML字符串，渲染该字符串并在font标签上使用CSS样式即可实现高亮的效果。 当时的实现过于简单，没有支持接收HTML字符串作为内容进行关键词匹配。这两天有同学问到，就又思考了这个问题.
推荐开源项目：mark.js —— JavaScript关键词高亮神器
最新发布
gitblog_00031的博客
05-12 453
推荐开源项目：mark.js —— JavaScript关键词高亮神器 项目地址:https://gitcode.com/julmot/mark.js 在信息爆炸的时代，我们经常需要在大量文本中快速找到关键词或短语，如何让这些关键信息脱颖而出呢？这就是mark.js大展身手的时候了。这是一个轻量级的JavaScript库，用于在任何场景下高亮显示页面中的关键词，特别适用于搜索结果的标记。 项目介绍...
html页面 关键字高亮,js高亮html关键字
weixin_39527292的博客
06-03 175
function highLightText(keywords) {let str = '再次曝光!iPhone12简直毫无短板,摄像头和电池提升巨大!'let hightlightText = keywordslet newStr = str.split('')let newLight = hightlightText.split('')newStr.forEach((e, i) => {...
PHP中网页怎么实现查询,如何在html页面中实现查找功能
weixin_39751195的博客
03-10 1004
前台效果：html查找：相关教程推荐：html教程js//搜索功能var oldKey0 = "";var index0 = -1;var oldCount0 = 0;var newflag = 0;var currentLength = 0;function wordSearch(flg) {var key = $("#key").val(); //取key值if (!key) {return;...
用JS将搜索的关键字高亮显示实现代码
10-26
总之，通过JavaScript实现关键字高亮显示是一项常见的需求，可以通过遍历文档、查找关键字并替换匹配内容来完成。理解这一过程对于提高网页的用户体验和互动性具有重要意义。在实际应用中，应根据具体需求进行调整和...
jquery实现静态搜索功能(可输入搜索文字)
10-20
总结起来，jQuery 实现静态搜索功能的关键在于监听用户输入、搜索关键字匹配以及动态更新页面展示。通过结合HTML、CSS和jQuery，我们可以构建一个简洁而实用的搜索功能，为用户提供方便的搜索体验。在实际应用中，...
jquery高亮插件（支持textarea内容高亮）
03-06
它能够轻松地对HTML元素内的文本进行匹配和高亮，甚至可以处理textarea内的内容，这在全文检索或搜索结果显示时非常有用。其简单易用的特性使得开发者可以快速集成到项目中，提高用户体验。 ### 插件安装 在使用这...
CodeMirrorWeb.zip 静态代码编辑器
06-23
1. **轻量级与跨平台**：CodeMirrorWeb是一个JavaScript库，可以轻松集成到任何HTML页面中，无需安装额外软件，支持所有主流浏览器，包括Chrome、Firefox、Safari和Edge等。 2. **多语言支持**：CodeMirrorWeb内置...
静态页面用JS实现搜索功能
Kevincram的博客
02-02 6916
调用方法 highlight（）： function encode(s){   return s.replace(/&/g,"&").replace(//g,">").replace(/([\\\.\*\[\]\(\)\$\^])/g,"\\$1"); } function decode(s){   return s.replace(/\\([\\\.\*\[\]\(\)\$\^])
给静态HTML网站添加全文检索
u013992330的博客
02-20 1322
使用pagefind对静态HTML网站快速添加全文检索
Vue前端：几种搜索框功能实现
热门推荐
qq_46119575的博客
01-04 1万+
Vue前端：几种搜索框功能实现
搜索页面静态实现
m0_68935893的博客
10-16 74
【代码】搜索页面静态实现。
静态html搜索,如何实现静态页面站内搜索
weixin_39550486的博客
06-08 1150
ss_yy0295zmouse发表于2013-7-3022:31forum.php?mod=redirect&goto=findpost&pid=20638&ptid=6994你只用js的话，基本没用，js也就只能在当前页面中检索内容，你要搜全站的，顶多也就模拟下，比如把所有内容...有人说了，可以用一个asp文件即可实现此功能，麻烦帮看看他的代码可以用吗？Hea...
只使用JS怎么给静态页面网站添加站内全局搜索功能？
努力是为了站在万人之中，成为别人的光
11-16 1万+
本文介绍了静态页面添加搜索功能的问题、解决方案和优化方法，通过实例演示了如何利用 JavaScript 动态加载 XML 中的数据实现搜索功能，为需要在静态页面中添加搜索功能的读者提供一定价值的参考。
静态网页加一个静态的搜索框_在静态网站上搜索
dlz00001的博客
07-10 2199
当我将博客从WordPress移至Jekyll时，我遇到了让用户搜索其中内容的问题。 我没有考虑太多，因此使用了Google自定义搜索引擎。 在这篇文章中，我想回顾一下搜索静态站点的可能选项，并对每个选项进行回顾。 Google自定义搜索引擎 将Google自定义搜索引擎集成到静态网站是一个多步骤的过程： 创建一个搜索引擎项 通过Web界面进行配置 获取集成代码...
指定字符串高亮 mark.js
weixin_45969830的博客
12-02 647
Vue Css 段落高亮 关键字高亮
Etc.End的博客
03-03 2140
mark 标签是 HTML5中的新标签。需要注意的是Internet Explorer 8 以及更早的版本不支持此标签。如果对于高亮的文字没有特殊的要求。它是很方便的。但是对颜色有要求的话，它的存在我个人觉得毫无任何意义。😂 😂 😂。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值