利用搜索引擎引用来高亮页面关键字

今天是：

首页 ┆ 信息查询 ┆ 网站SEO查询工具 ┆ CSS编辑器 ┆ 建站素材

软件新闻

操作系统

Vista Winxp Win2003 Linux Windows综合

工具软件

系统工具媒体工具网络工具杀毒软件聊天

软件开发

C教程 C++ Java C# ASP.NET JSP PHP

数据库

Oracle MySQL DB2 SQL Server Sybase

安全

网络病毒

办公应用

Word Excel Powerpoint Outlook 其他

平面设计

Photoshop Fireworks Coreldraw Flash Illustrator 3dsmax

网站运营

网站运营网站优化网站策划策划书下载建站心得站长故事网站盈利网页制作网页特效 建站素材 免费资源 QQ频道

当前位置：首页 >> 网页制作 >> Javascript/Ajax >> 利用搜索引擎引用来高亮页面关键字

发布于2006-03-07 21:31 来源：网络

当我们在使用大多数的网页搜索引擎的"网页快照"功能时，他们都会在返回的快照页面中加入关键字高亮的功能。这将非常方便我们查找网页中被检索的内容，其中google快照的关键字高亮还融入了分词功能，不同的词着以不同的颜色。可是由于%!#^*& $!的原因，google的网页快照非常的不稳定，那么我们就自己来加上这个关键字高亮功能吧。

如下图，当我们在google中搜索了关键字：apache asp.net后的结果：

点击结果的连接并导航到我们自己的页面后，如果我们加以如下关键字高亮，是否会对用户快速查找和定位页面感兴趣的内容，提供方便呢？

按么我们来仔细的看看，可是IE中的地址明明是：http://birdshome.cnblogs.com/archive/2005/11/17/Apache.html，那么怎么能在页面中高亮由搜索引擎检索的关键字呢？这里我们是利用了document的referrer属性来获取搜索引擎类型和关键字信息的。比如上例中，document.referrer属性就为：http://www.google.com/search?hl= ... _zh-CN%7Clang_zh-TW。我们通过JavaScript分析出指定搜索引擎的关键字，再操作页面DOM对象就实现了高亮的功能。不过对于较长的连续中文关键字，这种客户端高亮方案是不可能提供分词功能的，也算是美中不足了。

具体实现当前页面被检索关键字高亮的代码如下，放入页面的document.body.onload事件中调用就行了:)

以下代码片段：
function FriendlyDisplayForSearch() { var url = new UrlBuilder(document.referrer); if ( url.m_Success ) { var host = url.m_Host.toLowerCase(); if ( host.indexOf('.google.') != -1 ) { var keywords = url.GetValue('q', 'UTF8'); if ( keywords ) { var ht = new HighlightText(); ht.Execute(keywords); } } else if ( host.indexOf('.baidu.') != -1 ) { } } }// 由于编码和使用频率的关系，目前只做了google搜索引擎 function HighlightText(range) { if ( range ) { this.m_Range = range; } else { this.m_Range = document.body.createTextRange(); } this.m_Keyword = ''; this.toString = function() { return '[class HightlightText]'; }; } 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', 'highlighttext'); this.m_Range.execCommand('BackColor', 'false', 'highlight'); this.m_Range.collapse(false); } this.m_Range.moveToBookmark(bookmark); } } } }

中查找“利用搜索引擎引用来高亮页面关键字”更多相关内容

中查找“利用搜索引擎引用来高亮页面关键字”更多相关内容

上一篇：用JavaScript脚本将当地时间转换成其它时区
下一篇：收集的JavaScript效果---酷

最近更新

赞助商

·图片代替提交和重置按钮	12-11
·JavaScript教程:图片切割效果	12-10
·JavaScript动态加载CSS的三种方法	12-02
·JavaScript语言中的Literal Syntax特性	12-02
·JavaScript模仿Apache的ObjectPool	12-02
·关于JavaScript的执行域,标识符解析,闭包..	12-02
·Javascript教程:拖拽效果研究	12-01
·浏览器对Cookie的限制	11-10
·JavaScript中的排序函数sort	10-28
·初学Javascript的总结	10-24
·如何禁止被Iframe？	10-16