方法：利用文本替换，JS代码如下：
//高亮显示搜索到的关键字2
function HeightLight(Keyword)3
{
4
//文本选择器5
var TextRange;6
//是否找到7
var Found=false;8
//找到的次数9
var Count = 0;10
TextRange = document.body.createTextRange();11
12
Found = TextRange.findText(Keyword);13
if (Found)14
{
15
Count++;16
}17
18
while (Found && Count > 0)19
{20
21
TextRange.pasteHTML('<span style="background:yellow">' + Keyword + '</span>');22
//将滚动条定位到第一次查到的视口范围内23
if(Count==1)24
{25
TextRange.scrollIntoView();26
}27
//继续查找28
Found = TextRange.findText(Keyword);29
if (!Found)30
{31
Count = 0;32
}33
else34
{35
Count++;36
}37
}38
}运行后效果如下：
全部代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UFT-8"> <title>Untitled Document</title> <script> //高亮显示搜索到的关键字 function HeightLight(Keyword) { //文本选择器 var TextRange; //是否找到 var Found=false; //找到的次数 var Count = 0; TextRange = document.body.createTextRange(); Found = TextRange.findText(Keyword); if (Found) { Count++; } while (Found && Count > 0) { TextRange.pasteHTML('<span style="background:yellow">' + Keyword + '</span>'); //将滚动条定位到第一次查到的视口范围内 if(Count==1) { TextRange.scrollIntoView(); } //继续查找 Found = TextRange.findText(Keyword); if (!Found) { Count = 0; } else { Count++; } } } </script> </head> <body onload="HeightLight('window');"> <h1>page</h1> <h1>page 系统</h1> <h1>page 系统</h1> <h1>page</h1> <h1>page</h1> <h1>page 系统</h1> <h1>page 系统</h1> <h1>page</h1> <h1>page</h1> <h1>page 系统</h1> <h1>page 系统</h1> <h1>page</h1> <h1>page</h1> <h1>page 系统</h1> <h1>page 系统</h1> <h1>page</h1> <h1>page</h1> <h1>page 系统</h1> <h1>page 系统</h1> <h1>page</h1> <h1>page</h1> <h1>page 系统</h1> <h1>page window 系统</h1> <h1>page</h1> <h1>page</h1> <h1>page 系统</h1> <h1>page 系统</h1> <h1>page</h1> <h1>page</h1> <h1>page 系统</h1> <h1>page 系统</h1> <h1>page</h1> <h1>page</h1> <h1>page 系统</h1> <h1>page window系统</h1> <h1>page</h1> </body></html>
分类:
06~javascript
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）