使用textSearch.js实现关键词搜索，并搜索结果高亮显示

最新推荐文章于 2024-06-23 09:38:00 发布
最新推荐文章于 2024-06-23 09:38:00 发布
阅读量2.9k 收藏 3
点赞数
分类专栏： Java基础 文章标签： js实现全局搜索 textSearch.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tian_tian2/article/details/80896485
版权
本文介绍了如何使用textSearch.js插件在网页中实现全局搜索功能，当搜索关键词时，页面内容会高亮显示。该插件来源于张鑫旭的博客，经过修改，下载链接已提供。在应用此插件后，需要注意js的某些事件绑定可能失效，如click、on，可以改用onclick直接调用函数。
摘要由CSDN通过智能技术生成

引用块内容
今天我们介绍的这个插件来着http://www.zhangxinxu.com/wordpress/，张鑫旭的文章写得挺好的，大家有兴趣的多看看。
我们今天的这个插件叫“jquery.textSearch”，它的作用是可以页面上的关键词搜索，就像百度的搜索一样，只是它是单独在页面上搜索的。我们先看下效果图吧：
这里写图片描述
我们可以看到，当我们搜索关键词时，页面上就会标红出来。
需要引用的插件textSearch，下载地址（经过我修改后的版本）：https://download.csdn.net/download/tian_tian2/10515837

实现代码

//html代码
<form>
   <input placeholder="请输入编码或者名称" type=
最低0.47元/天 解锁文章
tian_tian2
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 实现实时搜索文档关键字并高亮显示
sinat_33255495的博客
04-18 984
最近接到的一个新需求：实时搜索文档关键字并高亮显示，听起来好难的样子，仔细分析起来其实也蛮简单的。
highlight.js 实现搜索关键词高亮效果 ,显示匹配数量及切换显示功能
weixin_42630688的博客
01-11 1182
highlight高亮显示搜索关键词
推荐开源项目：textsearch —— 提升你的文本搜索与替换效率
最新发布
gitblog_00078的博客
06-23 548
推荐开源项目：textsearch —— 提升你的文本搜索与替换效率 项目地址:https://gitcode.com/kootenpv/textsearch 在信息爆炸的时代，高效处理文本数据变得尤为重要。今天，我们要向大家推荐的是一款名为 textsearch 的Python库，它专为快速、便捷地执行多字符串查找和替换任务而设计。 项目介绍 textsearch是一个基于C语言加速的Pytho...
pdf.js实现多个不同词的高亮显示
Neo_L的博客
07-30 9476
这里我是没有进行压缩过的版本进行修改，该版本目录分析参考：https://blog.csdn.net/a973685825/article/details/81285288 目标：实现多个词的高亮显示 原理：通过对pdf.js本身提供的搜索功能（即ctrl+f）进行修改来达到多个词的高亮显示 注意：经过实践证明，多个词的高亮我所采用的这种方法只能在文档加载的进行一次性高亮，由于我的方法是在搜...
Vue---实现搜索功能的搜索关键词高亮显示
前端与计算机相关知识的分享，博主的qq523235674
02-18 1214
1.模板代码： <div v-html="hightligth(text)"></div> text为自己的文本搜索结果，比如黄某某 例子： 现在我的搜索关键词为黄，那么搜索结果就是黄某某 2.hightligth事件函数处理 （this.searchText为关键词，在本例中就是黄） hightligth(text) { const hightligthStr = `<span style="color: red">${
vue实现搜索列表 关键词高亮
liyananweb的博客
02-21 1070
可能会导致跨站脚本（XSS）攻击，因为它可以渲染HTML。在这个例子中，因为我们只是替换了由用户输入的纯文本关键词，所以是安全的。但是如果你的数据来源不可靠，你应该使用其他方法来避免XSS攻击。在Vue中实现搜索列表关键词高亮的功能，你可以创建一个自定义指令或者使用计算属性结合v-html指令。是否有值，如果没有，就返回原始列表。如果有值，它会创建一个正则表达式来匹配关键词，并用。指令用于将计算属性中返回的带有HTML标签的字符串渲染到页面上。数据属性上，这样用户输入的搜索关键词就会同步到这个属性。
一篇文章教你学会实现模糊搜索结果的关键词高亮显示
道阻且长，行则将至。
03-19 2919
一篇文章教你学会实现模糊搜索结果的关键词高亮显示 话不多说，先看效果图： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-widt
前端mark.js+highlight.js+小程序关键字关键词高亮
細水、長流√的专栏
09-07 587
highlight.js 点击get version按钮进入语言选择，勾选你常用的语言，在使用插件时会自动检测你要展示的代码的语言，并自动让代码高亮。所以还需要设置博客园的代码块背景颜色。highlight.js是一款基于JavaScript的语法高亮库，目前支持125种编程语言，有63种可供选择的样式，而且能够做到语言自动识别，和目前主流的JS框架都能兼容，比较实用，而且用起来炒鸡简单！打开styles文件夹，里面有很多的css文件，这些文件可以更改代码的css样式，包括高亮的颜色和背景色(主题色)。
Elasticsearch的简单使用（实现中文词汇搜索并高亮显示-后端+前端）——java篇
aaaPostcard的博客
01-09 1565
简介 Elasticsearch中文文档 ELK： ELK是Elasticsearch、Logstash、Kibana三大开源架构的字母简称 Elasticsearch是基于Lucene、分布式、通过restful方式进行交互的进实时搜索平台框架。 Logstash是ELK的中英文数据流引擎，用于从不同目标收集不同格式数据，经过过滤后支持输出到不同的目的地。 Kibana是将Elasticsearch的数据展示出来，提供实时分析的功能。 使用 一、安装Elasticsearch 下载地址 下载后进行解压，然
html 搜索高亮显示,用js实现文本点击搜索，文本高亮显示
weixin_39742392的博客
06-04 338
用js实现文本点击搜索，文本高亮显示var clicktitme=0;//name 修改点击次数记录函数var keyworld="芙蓉姐";var maodian=[]; //关键词存储var quanju_clicktitme=0; //全局点击次数记录function shouw(){if(clicktitme==0){$("#test").textSearch(keyworld,{mark...
jQuery.textSearch:jquery关键词高亮显示插件
05-07
`jQuery.textSearch`是一个用于jQuery的高效且灵活的插件，主要用于在HTML内容中搜索关键词并实现高亮显示。它能够帮助开发者快速地在网页文本中查找特定词汇，并通过突出显示这些词汇来提高用户的搜索体验。这个...
全局搜索的插件textSearch.js
07-03
使用textSearch.js后，可实现关键词搜索，并搜索结果高亮显示----------------------------------------------------------------
wordpress博客搜索关键词高亮显示实现代码
09-29
在WordPress博客中，为了让用户在搜索时能更清晰地看到他们输入的关键词所在的位置，...通过这些步骤，你可以在WordPress博客的搜索结果中实现关键词高亮显示，使得用户能够更容易地找到他们关心的内容，提升用户体验。
基于Vue实现关键词实时搜索高亮显示关键词
10-18
在本文中，我们将深入探讨如何使用Vue.js框架实现关键词的实时搜索功能，并在搜索结果中高亮显示这些关键词。这个功能对于提升用户体验，特别是对于实时搜索场景，如搜索引擎或聊天应用，至关重要。 首先，让我们...
Java中split的用法
热门推荐
tian_tian2
08-26 2万+
Java中split的用法
input输入框使用onkeypress实现回车启动按钮事件，另注：onkeypress、onkeyup与onkeydown的区别
tian_tian2
09-22 6263
input输入框使用onkeypress实现回车启动按钮事件,另注：onkeypress、onkeyup与onkeydown的区别 在做项目的过程中，经常会遇到，在input输入框中敲回车就可是搜索、登录或者是其他的一些事件，那么我觉得最简单的就是在input中加入这么一句代码： onkeypress="if(event.keyCode==13){ login();//要执行的方法 }" 在这边我也总结一下onkeypress、onkeyup与onkeydown的区别： onkeypress是在用户按下
c:forEach循环时，里面便签的点击事件的实现方法
tian_tian2
07-03 4398
c:forEach循环时，点击dd标签时，下面的ul显示出来，再点击dd标签时，下面的ul隐藏 方法一： //html中的代码 &lt;c:forEach items="${street.listGrid}" var="community"&gt; &lt;dd&gt; &lt;span class="code"&gt; ▶&amp;nbs
JSP中实现当前年份前后二十年的选择的下拉框
tian_tian2
09-22 3188
JSP中实现当前年份前后二十年的选择的下拉框
vue实现仿浏览器搜索功能 高亮显示关键词
06-09
要实现仿浏览器搜索功能并且高亮显示关键词，可以使用 Vue.js 中的计算属性和 v-html 指令来实现。 首先，在你的组件中定义一个计算属性，用于根据输入框中的值过滤列表数据并且高亮显示匹配的关键词，例如： ``` <template> <div> <input type="text" v-model="searchText" placeholder="Search..."> <ul> <li v-for="item in filteredList" :key="item.id" v-html="highlight(item.text)"></li> </ul> </div> </template> <script> export default { data() { return { list: [ { id: 1, text: 'apple' }, { id: 2, text: 'banana' }, { id: 3, text: 'orange' }, { id: 4, text: 'pear' } ], searchText: '' } }, computed: { filteredList() { return this.list.filter(item => { return item.text.toLowerCase().includes(this.searchText.toLowerCase()) }) } }, methods: { highlight(text) { if (!this.searchText) { return text } const regex = new RegExp(this.searchText, 'gi') return text.replace(regex, '<span class="highlight">$&</span>') } } } </script> ``` 在 highlight 方法中，首先判断搜索框中是否有值，如果没有值，则直接返回原始的文本。如果有值，则使用正则表达式将匹配的关键词用 span 标签包裹起来，并添加一个 highlight 类名，用于设置样式。 最后，在 CSS 中设置 highlight 类名的样式，例如： ``` .highlight { background-color: yellow; font-weight: bold; } ``` 这样就可以实现仿浏览器搜索功能并且高亮显示关键词了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值