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

  方法：利用文本替换，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  钱途无梁  阅读(528)  评论(0)    收藏  举报