本文介绍了一种使用JavaScript实现的网页内搜索关键词高亮的方法。通过创建文本范围并利用findText进行查找，找到的关键词会被替换为带有背景色标记的HTML片段。此技术有助于提升用户体验，使用户能快速定位页面上的搜索结果。
方法：利用文本替换，JS代码如下：
1
//高亮显示搜索到的关键字
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 else
34 {
35 Count++;
36 }
37 }
38
}
//高亮显示搜索到的关键字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>
扫一扫
3208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
