JavaScript实现全文搜索与高亮显示

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《JavaScript实现全文搜索与高亮显示》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

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

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

原生JS实现文本替换高亮

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

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

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

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

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

获取到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还是推荐用专业工具。

以上就是《JavaScript实现全文搜索与高亮显示》的详细内容，更多关于全文检索的资料请关注golang学习网公众号！