读书人

js 兑现高亮

发布时间: 2012-08-30 09:55:54 作者: rapoo

js 实现高亮
最近在做一个平台,搜索关键字,展示包含该关键字的源码文件列表,点击进入源码后要求高亮关键字,用js 实现了关键字高亮,参考源码如下:

<!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="Show();"><script>function Show(){HeightLight('window');  }      </script>        <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>


读书人网 >JavaScript

热点推荐