方法:利用文本替换,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            }

 运行后效果如下:

 

 

全部代码:

<!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>
posted on 2009-03-06 11:28  钱途无梁  阅读(507)  评论(0编辑  收藏  举报