JavaScript 用搜索引擎引用高亮页面关键字 -

ccw5510

浏览: 8060 次
性别:
来自: 北京

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (6)

社区版块

存档分类

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

搜索引擎 JavaScript Google prototype HTML

　　当在使用大多数的网页搜索引擎的“网页快照”功能时，都会在返回的快照页面中加入关键字高亮的功能。这将非常方便查找网页中被检索的内容，其中 google 快照的关键字高亮还融入了分词功能，不同的词以不同的颜色显示。可是由于其他的原因，google 的网页快照非常的不稳定，那么就需要自己加上这个关键字的高亮功能。

　　代码主要使用了，onLoad 事件、document.referrer 属性以及字符串对象 indexOf 方法和 split 方法，主要功能和用法如下。

　　• 当页面完全载入时，onLoad 事件会被触发，该事件可以调用相应的函数，作为其事件处理函数。在函数中，可以是任意合法的JavaScript代码。

　　• document.referrer 返回用户用于冲浪至当前文档的地址。如果当前文档是首页或是通过键入 URI 到达的页面，那么这个属性返回空字符串。

　　• indexOf 方法返回 String 对象内第一次出现子字符串的字符位置。indexOf 方法返回一个整数值，指出String对象内子字符串的开始位置。如果没有找到子字符串，则返回 -1。如果 startIndex 是负数，则 startIndex 被当作零。如果它比最大的字符位置索引还大，则它被当作最大的可能索引。从左向右执行查找。否则，该方法与 lastIndexOf 相同。

　　• split 方法将一个字符串分割为子字符串，然后将结果作为字符串数组返回，该方法的结果是一个字符串数组，在 stingObj 中每个出现 sparator 的位置都要进行分解。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>

　　运行该程序后，页面出现一段文本文字，如下图所示。如果是通过搜索引擎找到进入这个页面的话，就会根据搜索引擎上的关键字来高亮显示搜索的文本，如下图所示。