0

0

JavaScript搜索功能_全文检索与高亮显示

幻影之瞳

幻影之瞳

发布时间:2025-11-29 16:04:02

|

601人浏览过

|

来源于php中文网

原创

答案:javascript实现搜索高亮可通过原生replace、pdf.js或mark.js。先用转义后关键词构造不区分大小写的正则,替换为带标签的html并插入页面;对pdf可用pdf.js加载文件,通过iframe调用findbar api实现全词高亮;复杂场景推荐mark.js,支持排除元素和模糊匹配,调用mark()即可完成。

javascript搜索功能_全文检索与高亮显示

用JavaScript实现搜索和高亮,核心是找到目标文本并给它加上醒目的样式。这在文档预览、数据列表筛选等场景很常见。直接操作DOM或利用现有工具库都能达到目的,关键是选对方法。

原生JS实现文本替换高亮

对于简单的文本内容,可以直接用字符串的replace方法配合正则表达式来处理。先把用户输入的关键词转成正则,全局匹配,并替换成带标签的版本,比如用包裹,再通过CSS定义这个标签的样式。

需要注意的是,特殊字符要先转义,避免正则报错。例如“+”、“.”这类符号,在构造正则前得加上反斜杠。处理完的数据,可以用innerHTML插入页面,原来的文字就变成带颜色的了。

  • 创建一个不区分大小写的全局正则表达式
  • 对关键词里的特殊字符进行转义
  • 用replace把所有匹配项替换成带高亮样式的HTML片段

借助pdf.js处理PDF文件检索

如果要在网页里看PDF并支持搜索,pdf.js是个成熟方案。部署好之后,通常用iframe嵌入viewer.html,传入PDF的地址就能显示文件。搜索功能其实已经内置了,可以通过JavaScript调用其内部的findBar组件。

佳可商务购物程序 2004
佳可商务购物程序 2004

在原版的基础上做了一下修正评论没有提交正文的问题特价商品的调用连接问题去掉了一个后门补了SQL注入补了一个过滤漏洞浮动价不能删除的问题不能够搜索问题收藏时放入购物车时出错点放入购物车弹出2个窗口修正主题添加问题商家注册页导航连接问题销售排行不能显示更多问题热点商品不能显示更多问题增加了服务器探测 增加了空间使用查看 增加了在线文件编辑增加了后台管理里两处全选功能更新说明:后台的部分功能已经改过前台

下载

立即学习Java免费学习笔记(深入)”;

获取到iframe的contentWindow后,可以访问到它的查找实例。设置好搜索词,开启全词高亮,然后触发搜索事件,页面上所有匹配的地方就会自动标黄。这个过程不需要自己去解析PDF文本,省去了很多麻烦。

  • 引入pdf.js并配置好静态资源路径
  • 使用iframe加载PDF,注意处理跨域问题
  • 通过contentWindow调用findBar的API执行搜索和高亮

使用专用插件简化开发

像mark.js这样的库专门解决高亮问题,功能更全面。它能处理复杂DOM结构,支持同义词、模糊匹配,还能排除某些元素不被标记。引入后创建一个实例,指定要搜索的区域,一行代码就能完成标记。

这类插件的好处是稳定性好,边界情况考虑周全。比如搜索“java”,不会把“javascript”里的“java”也错误高亮(除非你要求)。还有texthighlighter、Vue-Search-Highlight等,针对不同技术都有适配方案。

  • 通过npm安装或CDN引入mark.js
  • 选择需要搜索的容器元素
  • 调用mark()方法传入关键词,自动完成高亮
基本上就这些。根据实际需求选择方法,简单场景手写replace足够,复杂文档或PDF还是推荐用专业工具。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

530

2023.06.20

正则表达式不包含
正则表达式不包含

正则表达式,又称规则表达式,,是一种文本模式,包括普通字符和特殊字符,是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串,通常被用来检索、替换那些符合某个模式的文本。php中文网给大家带来了有关正则表达式的相关教程以及文章,希望对大家能有所帮助。

258

2023.07.05

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

765

2023.07.05

java正则表达式匹配字符串
java正则表达式匹配字符串

在Java中,我们可以使用正则表达式来匹配字符串。本专题为大家带来java正则表达式匹配字符串的相关内容,帮助大家解决问题。

219

2023.08.11

正则表达式空格
正则表达式空格

正则表达式空格可以用“s”来表示,它是一个特殊的元字符,用于匹配任意空白字符,包括空格、制表符、换行符等。本专题为大家提供正则表达式相关的文章、下载、课程内容,供大家免费下载体验。

356

2023.08.31

Python爬虫获取数据的方法
Python爬虫获取数据的方法

Python爬虫可以通过请求库发送HTTP请求、解析库解析HTML、正则表达式提取数据,或使用数据抓取框架来获取数据。更多关于Python爬虫相关知识。详情阅读本专题下面的文章。php中文网欢迎大家前来学习。

293

2023.11.13

正则表达式空格如何表示
正则表达式空格如何表示

正则表达式空格可以用“s”来表示,它是一个特殊的元字符,用于匹配任意空白字符,包括空格、制表符、换行符等。想了解更多正则表达式空格怎么表示的内容,可以访问下面的文章。

244

2023.11.17

正则表达式中如何匹配数字
正则表达式中如何匹配数字

正则表达式中可以通过匹配单个数字、匹配多个数字、匹配固定长度的数字、匹配整数和小数、匹配负数和匹配科学计数法表示的数字的方法匹配数字。更多关于正则表达式的相关知识详情请看本专题下面的文章。php中文网欢迎大家前来学习。

547

2023.12.06

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

23

2026.03.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
php-src源码分析探索
php-src源码分析探索

共6课时 | 0.5万人学习

简单聊聊mysql8与网络通信
简单聊聊mysql8与网络通信

共1课时 | 845人学习

ThinkPHP6.x API接口--十天技能课堂
ThinkPHP6.x API接口--十天技能课堂

共14课时 | 1.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号