- 论坛徽章:
- 0
|
当在使用大多数的网页搜索引擎的“网页快照”功能时,都会在返回的快照页面中加入关键字高亮的功能。这将非常方便查找网页中被检索的内容,其中 google 快照的关键字高亮还融入了分词功能,不同的词以不同的颜色显示。可是由于其他的原因,google 的网页快照非常的不稳定,那么就需要自己加上这个关键字的高亮功能。
本节代码主要使用了 onLoad 事件、document.referrer 属性以及字符串对象 indexOf 方法和 split 方法,主要功能和用法如下。
• 当页面完全载入时,onLoad 事件会被触发,该事件可以调用相应的函数,作为其事件处理函数。在函数中,可以是任意合法的JavaScript代码。
• document.referrer 返回用户用于冲浪至当前文档的地址。如果当前文档是首页或是通过键入 URI 到达的页面,那么这个属性返回空字符串。
• indexOf 方法返回 String 对象内第一次出现子字符串的字符位置。indexOf 方法返回一个整数值,指出String对象内子字符串的开始位置。如果没有找到子字符串,则返回 -1。如果 startIndex 是负数,则 startIndex 被当作零。如果它比最大的字符位置索引还大,则它被当作最大的可能索引。从左向右执行查找。否则,该方法与 lastIndexOf 相同。
• split 方法将一个字符串分割为子字符串,然后将结果作为字符串数组返回,该方法的结果是一个字符串数组,在 stringObj 中每个出现 separator 的位置都要进行分解。separator 不作为任何数组元素的部分返回。- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>利用搜索引擎引用高亮页面关键字</title>
- <script language="javascript"><!--
- function FriendlyDisplayForSearch()
- {
- var url = document.referrer; //根据来路地址创建一个新的UrlBuilder对象
-
- var host = url.toLowerCase(); //得到主机名
- //if(host.indexOf('.google.') != -1) //如果是google搜索引擎过来的
- if(true)
- {
- var keywords = 'JavaScript'; //得到搜索关键字
- if(keywords) //如果存在关键字
- {
- var ht = new HighlightText(); //创建高亮文本对象
- ht.Execute(keywords); //执行高亮文本
- }
- }
- else if(host.indexOf('.baidu.') != -1)
- {
- }
- }
- function HighlightText(range) //函数:高亮文本
- {
- if(range) //如果存在range
- {
- this.m_Range = range; //范围赋值
- }
- else //否则
- {
- this.m_Range = document.body.createTextRange();
- }
- this.m_Keyword = '';
- this.toString = function()
- {
- return '[class HighlightText]';
- };
- }
- HighlightText.prototype.Execute = function(keyword) //高亮执行的原型函数
- {
- if(keyword) //如果存在关键字
- {
- this.m_Keyword = keyword; //关键字赋值
- }
- if(this.m_Range && this.m_Keyword) //如果存在域和关键字
- {
- var separater = '';
- if(this.m_Keyword.indexOf(' ') == -1) //如果关键字存在空格符
- {
- separater = '+'; //分隔符赋值
- }
- var keywords = this.m_Keyword.split(separater); //根据分隔符分离关键字
- var bookmark = this.m_Range.getBookmark();
- for(var i=0; i<keywords.length; ++i) //循环遍历关键字
- {
- var keyword = keywords[i];
- if(keyword && keyword.length > 1)
- {
- while(this.m_Range.findText(keywords[i])) //文本中存在关键字
- {
- //高亮关键字
- this.m_Range.execCommand('ForeColor', 'false', '#FFFFFF'); //参数中的 ForeColor 用来设置或获取当前选区的前景(文本)颜色
- this.m_Range.execCommand('BackColor', 'false', '#FF0000'); //BackColor 用来设置或获取当前选区的背景颜色
- this.m_Range.collapse(false);
- }
- this.m_Range.moveToBookmark(bookmark); //赋值文本
- }
- }
- }
- }
- // --></script>
- </head>
-
- <body onLoad="FriendlyDisplayForSearch()">
- <center>
- <h1>利用搜索引擎引用高亮页面关键字</h1>
- <hr>
- <br>
- <p>JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化,减少下载时间。
- JavaScript能及时响应用户的操作,对提交表单做即时的检查,无需浪费时间交由 CGI 验证。JavaScript
- 的特点是无穷无尽的,只要你有创意。</P>
- </center>
- </body>
- </html>
复制代码 运行该程序后,页面出现一段文本文字,如下图所示。如果是通过搜索引擎找到进入这个页面的话,就会根据搜索引擎上的关键字来高亮显示搜索的文本,如下图所示。
转载地址:http://www.xuekaifa.com/article/20101024/000246.html |
|