您的位置：首页 > Web前端 > JavaScript

Javascript 高亮显示搜索到的关键字

2010-03-22 23:50 429 查看

<!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>
<mce:script type="text/javascript"><!--
//高亮显示搜索到的关键字
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" mce_style="background:yellow">' + Keyword + '</span>');
//将滚动条定位到第一次查到的视口范围内
if(Count==1)
{
TextRange.scrollIntoView();
}
//继续查找
Found = TextRange.findText(Keyword);
if (!Found)
{
Count = 0;
}
else
{
Count++;
}
}
}

// --></mce: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>

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" mce_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            }

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航