HTML5长文档内置搜索可通过四种方法实现：一、原生DOM操作高亮关键词；二、contenteditable配合window.find()定位；三、引入mark.js库专业高亮；四、CSS优化交互与样式。
如果您希望在 HTML5 页面中为长篇文档添加内置搜索功能，使用户能快速定位关键词，则可通过原生 DOM 操作结合表单控件实现。以下是实现此功能的具体步骤：
一、使用 input 元素与 JavaScript 实现基础搜索
该方法利用 document.querySelectorAll 获取所有文本节点，遍历并高亮匹配内容，不依赖外部库，兼容主流现代浏览器。
1、在页面中插入一个搜索输入框与触发按钮：
2、为搜索按钮绑定点击事件：
document.getElementById('searchBtn').addEventListener('click', function() { ... });
立即学习“前端免费学习笔记（深入）”；
3、在事件处理函数中获取输入值，并调用高亮函数：
const keyword = document.getElementById('searchInput').value.trim();
if (keyword) highlightText(keyword);
4、定义 highlightText 函数，遍历指定容器内所有文本节点，用正则替换匹配项为带标记的 span：
const regex = new RegExp('(' + keyword + ')', 'gi');
node.nodeValue = node.nodeValue.replace(regex, '$1');
二、采用 contenteditable 区域配合 find() 方法（仅限部分浏览器）
该方法借助浏览器原生 window.find() API，在可编辑区域中执行查找，适合仅需定位无需高亮的轻量场景，但 Chrome 与 Firefox 支持行为存在差异。
1、设置文档主体或某段落为可编辑状态：
这里是待搜索的文档内容...
2、调用 window.find() 执行查找：
window.find(keyword, false, true, false, false, false, true);
3、确保焦点落在目标元素上以保证查找生效：
document.getElementById('searchableContent').focus();
4、注意：该方法不会自动滚动至匹配位置，需手动调用 scrollIntoView()：
document.getSelection().anchorNode.parentElement.scrollIntoView({ behavior: 'smooth' });
三、引入 mark.js 库实现专业级搜索与高亮
该方法使用轻量级第三方库 mark.js，支持区分大小写、跨标签匹配、正则模式及分页高亮，适用于对搜索体验要求较高的文档场景。
1、通过 script 标签引入 mark.js：
2、初始化 Mark 对象，指定目标容器：
const instance = new Mark(document.querySelector("#contentContainer"));
3、执行搜索并高亮：
instance.mark(keyword, {
diacritics: true,
separateWordSearch: true,
accuracy: "exactly"
});
4、清除之前高亮结果（可选）：
instance.unmark();
四、为搜索框添加 CSS 样式与交互反馈
该方法聚焦视觉优化，通过纯 CSS 控制搜索框外观、高亮样式及键盘操作响应，提升用户操作直觉性。
1、为搜索输入框设置基础样式：
#searchInput { padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; width: 200px; }
2、定义高亮样式类：
.highlight { background-color: #ffeb3b; font-weight: bold; }
3、添加回车键触发搜索的支持：
document.getElementById('searchInput').addEventListener('keypress', function(e) {
if (e.key === 'Enter') document.getElementById('searchBtn').click();
});
4、禁用默认文本选中高亮以避免干扰（针对高亮区域）：
.highlight::selection { background: transparent; }
