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 >

转载于:https://www.cnblogs.com/qiantuwuliang/archive/2009/03/06/1404505.html