网页高亮搜索关键词-优快云博客

本文链接：https://blog.youkuaiyun.com/lqscoke/article/details/1653880

<html>
<script url="UrlBuilder.js"></script>
<body>
<script>

//测试代码
function UrlTest(){
    var myht=new HighlightText();
    myht.Execute("lqscoke");
}

//////////////////******高亮度显示关键字******////////////////

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', 'red');
                      this.m_Range.execCommand('BackColor', 'false', 'highlight');
                      this.m_Range.collapse(false);
                 }
                 this.m_Range.moveToBookmark(bookmark);
             }
         }
     }
}
//////////////////******高亮度显示关键字******////////////////
</script>

<script language="javascript">
////////////////////////////------通过Google搜索,获取关键字,并高亮度显示-------///////////////////
function FriendlyDisplayForSearch()
{
    var myurltest="http://www.google.com/search?hl=zh-CN&newwindow=1&q=%E6%9D%8E%E6%B3%89%E7%94%9F&lr=";
    var url = new UrlBuilder(myurltest);
    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 )
         {

         }
    }
}
function TestUrlBuilder()
{
    var url = new UrlBuilder('http://www.google.com/search?hl=zh-CN&newwindow=1&q=%E6%9D%8E%E6%B3%89%E7%94%9F&lr=');
//http://birdshome.cnblogs.com:8080/index.aspx?hl=zh-CN&newwindow=1&q=#abc
    url.GetValue('');
    var strParams = '';
    for ( var key in url.m_Params )
    {
         strParams += key + ' = ' + decodeURI(url.m_Params[key]) + ' ';
    }
    alert('m_Href = ' + url.m_Href
        + ' m_Host = ' + url.m_Host
        + ' m_Hostname = ' + url.m_Hostname
        + ' m_Port = ' + url.m_Port
        + ' m_Protocol = ' + url.m_Protocol
        + ' m_Path = ' + url.m_Path
        + ' m_Search = ' + url.m_Search
        + ' m_Hash = ' + url.m_Hash
        + ' ' + strParams);
}
</script>

<script>
/***********************************************************
UrlBuilder Class created by JavaScript

Author: lizhi[at]hit.edu.cn
Version: 1.0
Created: 2006.02.21 22:05
Updated: N/A

History:
     1. The first version of code created in 2006.02.21
***********************************************************/
function UrlBuilder(url)
{
    this.m_Href = null;
    this.m_Host = null;
    this.m_Hostname = null;
    this.m_Port = null;
    this.m_Protocol = null;
    this.m_Path = null;
    this.m_Search = null;
    this.m_Hash = null;
    this.m_Params = null;
    this.m_Sucess = false;
    if ( url ) this.Parse(url);

    this.toString = function()
    {
         return '[class UrlBuilder]';
    };
}

UrlBuilder.prototype.Parse = function(url)
{
    var m = url.match(/(w{3,5}:)//([^.]+(?:.[^.:/]+)+)(?::(d{1,5}))?/?/);
    if ( m )
    {
         this.m_Protocol = m[1];
         this.m_Hostname = m[2];
         this.m_Port = m[3];
         if ( this.m_Port )
         {
             this.m_Host = this.m_Hostname + ':' + this.m_Port;
         }
         else
         {
             this.m_Host = m[2];
         }
         var indexHash = url.indexOf('#');
         if ( indexHash != -1 )
         {
             this.m_Hash = url.substr(indexHash);
         }
         else
         {
             this.m_Hash = '';
         }
         var indexParams = url.indexOf('?');
         if ( indexParams != -1 )
         {
             if ( indexHash != -1 )
             {
                  this.m_Search = url.substring(indexParams, indexHash);
             }
             else
             {
                  this.m_Search = url.substr(indexParams);
             }
             this.m_Path = url.substr(indexParams);
         }
         else
         {
             this.m_Search = '';
         }
         this.m_Success = true;
         this.m_Params = null;
         this.m_Href = url;
    }
};

UrlBuilder.prototype.GetValue = function(key, encoding)
{
    if ( !this.m_Params )
    {
         if ( this.m_Search )
         {
             this.m_Params = {};
             var search = this.m_Search.substring(1);
             var keyValues = search.split('&');
             for ( var i=0 ; i < keyValues.length ; ++i )
             {
                  var keyValue = keyValues[i];
                  var index = keyValue.indexOf('=');
                  if ( index != -1 )
                  {
                       this.m_Params[keyValue.substring(0, index)] = keyValue.substr(index+1);
                  }
                  else
                  {
                       this.m_Params[keyValue] = '';
                  }
              }
         }
    }
    encoding = encoding || '';
    switch(encoding.toUpperCase())
    {
         case 'UTF8' :
         {
              return decodeURI(this.m_Params[key]);
         }
         case 'UNICODE' :
         {
              return unescape(this.m_Params[key]);
         }
         case 'GB2312' : // need VBScript function Chr()
         default :
         {
              return this.m_Params[key];
         }
    }
}
////////////////////////////------通过Google搜索,获取关键字,并高亮度显示-------///////////////////
</script>

<input type="button" value="Click" onclick=FriendlyDisplayForSearch()>
<input type="button" value="Click_Test" onclick="UrlTest()"
<p>
李泉生
李泉生lqscoke 李泉lqscoke 生lqscoke 李泉生lqscoke 李lqscoke 泉生李泉生
李泉生lqscoke 李泉生
lqscoke
lqscoke
lqscoke
lqsco李泉生ke lqscoke
lqscoke lqs李泉生coke lqscoke lqscoke
</p>
</body>
</html>

高亮度显示搜索关键字