完全基于 JavaScript 实现的分栏搜索百度和 Google 的页面 (2)

　　这次主要说 baigoogledu_head.htm 这个页面，也就是搜索框架页中的头页面部分。功能很明确——显示我的首页链接，搜索页面链接，单独搜索百度、Google的链接，搜索表单和分页。搜索表单部分和首页一样，都是一个 get 方式的 form，单独的搜索链接和框架页中设置两个框架的 src 属性一样，分页只是增加一个上一页下一页和显示第几页，后来又增加了一个正负10页的下拉列表分页，这些都很简单，就不再赘述了，稍后看 javascript 代码就可以了。

　　这里遇到的一个大难题是怎样把以 utf-8 编码方式传递到本页的搜索关键词转换成中文或特殊符号等，因为 javascript 中的 decodeURI 函数兼容性较差，而 escape 和 unescape 支持的是 ucs + ascii 这种组合，因此需要把 utf-8 转换成 ucs。

　　首先说下 utf-8 和 ucs 之间的区别吧，ucs 是通用字符集 (Universal Character Set) 的缩写，它使用 31 位来编码一个字符，即从 0x00000000 到 0x7fffffff，长度为定长 4 字节，因此使用 escape 编码中文后得到是类似 %uXXXX 这样的形式，XXXX 即为 ucs 的 4 字节编码，而编码英文特殊符号则使用 ascii 的编码方式，即 %XX ，XX 即为 ascii 码 (事实上 utf-8 编码 ascii 字符也是这样，下面会详细说明)。而 utf-8，即 UCS Transformation Form - 8，是目前较为流行的 unicode 编码，这种编码实际上是变长的，因为在某些情况下，ucs 编码的 0x00 表示为 ascii 中的 nul，即 '\0'，而这在 C 语言中代表的是字符串的结束，因此需要对 C 语言做重要的改变才能使用，而 utf-8 编码则没有问题。

　　通常 unicode 字符用 u+xxxx 这种形式来表示，xxxx 为十六进制，代表这个字符的 unicode 码，首先看下下面这个表：

u+00000000 - u+0000007f = 0xxxxxxx
u+00000080 - u+000007ff = 110xxxxx 10xxxxxx
u+00000800 - u+0000ffff = 1110xxxx 10xxxxxx 10xxxxxx 
u+00010000 - u+001fffff = 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx 
u+00200000 - u+03ffffff = 111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 
u+04000000 - u+7fffffff = 1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx

　　其中的 x 由字符编码数的二进制来填充，只用最短的那个足够表达一个字符编码数的多字节串，在多字节串中，第一个字节的开头 1 的数目就是整个串中字节的数目。就已编码字符数来看，目前仅仅使用了 16 位，故目前最长仅为 3 字节，实际上最长可以用 6 字节来编码 31 位，而且对于 0x00 到 0x7f 范围内的 ascii 字符，utf-8 编码和 ascii 编码实际上是一样的，因此在 ascii 系统里 utf-8 可以兼容 ascii。而对于大于 1 字节的情况，所有字节均为 1 开头，即 0x80 到 0xff 的范围，因此可以很方便的与 1 字节的情况区分开。

　　例如：符号 @ 的 ascii 码为 0x40，二进制码为 0100000，则 utf-8 的二进制码也为 01000000，即 0x40；“田嵩”的 ucs 码为 0x75 0x30 和 0x5d 0x69，二进制为 01110101 00110000 和 01011101 01101001，因为是 16 位，故需要 3 个字节来表示，utf-8 的二进制码为 11100111 10010100 10110000 和 11100101 10110101 10101001 ，即 0xe7 0x94 0xb0 和 0xe5 0xb5 0xa9，因此使用 utf-8 来编码 url 时即为 %E7%94%B0%E5%B5%A9。

　　现在我们关心的，是怎样将 url 传递来的 %E7%94%B0%E5%B5%A9+hust 这样的字符串转化为 %u7530%u5D69%20hust 进而用 unescape 转化为 田嵩 hust (中间有一个空格)。首先读取字符串，因为 % 永远是作为 url 编码的标识符存在 (单独的 % 被编码为 %25)，因此当检测到 % 后，继续检测其后面的 2 个字符，并转化为二进制码，如果首位为 0 则直接返回 % 加这 2 个字符，否则根据前面 1 的个数连续读取多组，然后转化为 ucs 编码并在前面加上 %u 返回。相关函数如下：

var  cc  =   ' 0123456789abcdef ' ;
// 为方便十六进制和十进制的转换而设

function  b2h(b) {
// 2 进制字符串转十六进制字符串
     var  r  =   '' ;
     var  t  =   0 ;
     for  ( var  i  =   0 ; i  <  b.length; i ++ ) {
        t  =  t  *   2   +  (b.charAt(i)  ==   ' 0 '   ?   0  :  1 );
// 每次扫描后，将 t 乘以 2，然后加上本位，这样，对于 0110 在每次扫描后 t 的值分别为 0，0*2+1=1，1*2+1=3，3*2+0=6
         if  (i  %   4   ==   3 ) {
            r  +=  cc.charAt(t);
            t  =   0 ;
// 读取完 4 个字节后将数字转化为十六进制字符加到结果的后面，并将 t 置 0
        }
    }
     return  r;
}

function  h2b(h) {
// 16 进制字符串转二进制字符串
    h  =  h.toLowerCase();
     var  r  =   '' ;
     for  ( var  i  =   0 ; i  <  h.length; i ++ ) {
         var  t  =  cc.indexOf(h.charAt(i));
// 将十六进制字符转化为数字
        r  +=  ((t  &   8 )  ==   0   ?   ' 0 '  :  ' 1 ' )  +  ((t  &   4 )  ==   0   ?   ' 0 '  :  ' 1 ' )  +  ((t  &   2 )  ==   0   ?   ' 0 '  :  ' 1 ' )  +  ((t  &   1 )  ==   0   ?   ' 0 '  :  ' 1 ' );
// 根据按位“与”的结果得出 4 位二进制数的值，例如 6 的二进制为 0110，其与8、4、2、1 (1000、0100、0010、0001)的按位“与”结果为 0、4、2、0，因此根据是否为 0 得出 0110
    }
     return  r;
}

function  t(s) {
     var  r  =   '' ;
     var  si  =   0 ;
     while  (si  <  s.length) {
// 扫描字符串，si 为当前字符指针
         if  (s.charAt(si)  ==   ' % ' ) {
// 扫描到 % 符号
             var  utfh  =  s.charAt(si  +   1 )  +  s.charAt(si  +   2 );
            si  +=   3 ;
             var  utfb  =  h2b(utfh);
// 将接下来的 2 个字节读入并转化为二进制字符串，同时指针移动到这 2 个字节之后，即移动 3 个字节
             var  c  =   0 ;
             for  ( var  j  =   0 ; j  <  utfb.length; j ++ ) {
                 if  (utfb.charAt(j)  ==   ' 0 ' )
                     break ;
                c ++ ;
            }
// 判断二进制字符串首 1 的个数
             if  (c  ==   0 ) {
                r  +=   ' % '   +  utfh;
                 continue ;
//  1 的个数为 0，说明是 ascii 字符，直接加到结果后面，并继续下一扫描
            }
             var  ucsb  =   '' ;
             for  ( var  j  =  c  +   1 ; j  <   8 ; j ++ )
                ucsb  +=  utfb.charAt(j);
// 滤掉前缀将二进制字符写入另一变量，如 1110，c = 3，则从第 4 位开始到第 7 位
             for  ( var  i  =   1 ; i  <  c; i ++ ) {
                utfh  =  s.charAt(si  +   1 )  +  s.charAt(si  +   2 );
                si  +=   3 ;
                utfb  =  h2b(utfh);
                 for  ( var  j  =   2 ; j  <   8 ; j ++ )
                    ucsb  +=  utfb.charAt(j);
// 根据 1 的个数继续读入后续分组，并用相同方法写入二进制字符，因后续分组均为 10xxxxxx，故从固定的第 2 位开始到第 7 位
            }
            r  +=   ' %u '   +  b2h(ucsb);
// 转化为十六进制字符串并在前面加上 %u 后加到结果后面
             continue ;
        }
        r  +=  s.charAt(si)  ==   ' + '   ?   ' %20 '  : s.charAt(si);
// 扫描到不是 %，判断如果是 + (空格的 url 编码形式) 则加上 %20 (空格的 escape 结果) 到结果后面，否则加上该字符本身到结果后面
        si ++ ;
    }
     return  r;
}

　　调用的时候就很简单了，直接使用 wi.value = unescape(t(w))，其中 wi 为关键字文本框，w 为从 url 中获取的已编码搜索关键字。本页面所有脚本如下：

var  cc  =   ' 0123456789abcdef ' ;

function  b2h(b) {
     var  r  =   '' ;
     var  t  =   0 ;
     for  ( var  i  =   0 ; i  <  b.length; i ++ ) {
        t  =  t  *   2   +  (b.charAt(i)  ==   ' 0 '   ?   0  :  1 );
         if  (i  %   4   ==   3 ) {
            r  +=  cc.charAt(t);
            t  =   0 ;
        }
    }
     return  r;
}

function  h2b(h) {
    h  =  h.toLowerCase();
     var  r  =   '' ;
     for  ( var  i  =   0 ; i  <  h.length; i ++ ) {
         var  t  =  cc.indexOf(h.charAt(i));
        r  +=  ((t  &   8 )  ==   0   ?   ' 0 '  :  ' 1 ' )  +  ((t  &   4 )  ==   0   ?   ' 0 '  :  ' 1 ' )  +  ((t  &   2 )  ==   0   ?   ' 0 '  :  ' 1 ' )  +  ((t  &   1 )  ==   0   ?   ' 0 '  :  ' 1 ' );
    }
     return  r;
}

function  t(s) {
     var  r  =   '' ;
     var  si  =   0 ;
     while  (si  <  s.length) {
         if  (s.charAt(si)  ==   ' % ' ) {
             var  utfh  =  s.charAt(si  +   1 )  +  s.charAt(si  +   2 );
            si  +=   3 ;
             var  utfb  =  h2b(utfh);
             var  c  =   0 ;
             for  ( var  j  =   0 ; j  <  utfb.length; j ++ ) {
                 if  (utfb.charAt(j)  ==   ' 0 ' )
                     break ;
                c ++ ;
            }
             if  (c  ==   0 ) {
                r  +=   ' % '   +  utfh;
                 continue ;
            }
             var  ucsb  =   '' ;
             for  ( var  j  =  c  +   1 ; j  <   8 ; j ++ )
                ucsb  +=  utfb.charAt(j);
             for  ( var  i  =   1 ; i  <  c; i ++ ) {
                utfh  =  s.charAt(si  +   1 )  +  s.charAt(si  +   2 );
                si  +=   3 ;
                utfb  =  h2b(utfh);
                 for  ( var  j  =   2 ; j  <   8 ; j ++ )
                    ucsb  +=  utfb.charAt(j);
            }
            r  +=   ' %u '   +  b2h(ucsb);
             continue ;
        }
        r  +=  s.charAt(si)  ==   ' + '   ?   ' %20 '  : s.charAt(si);
        si ++ ;
    }
     return  r;
}

window.onload  =   function () {
     var  url  =  document.location.toString().split( ' ? ' );
     var  w  =   '' , p  =   1 ;
     if  (url.length  ==   2 ) {
        url  =  url[ 1 ].split( ' & ' );
        w  =  url[ 0 ].substring( 2 );
         if  (url.length  ==   2 )
            p  =  parseInt(url[ 1 ].substring( 2 ));
    }
     var  baidu  =  document.getElementById( ' baidu ' );
     var  google  =  document.getElementById( ' google ' );
     var  wi  =  document.getElementById( ' w ' );
     var  pp  =  document.getElementById( ' pp ' );
     var  ps  =  document.getElementById( ' ps ' );
     var  np  =  document.getElementById( ' np ' );
     var  pl  =  document.getElementById( ' pl ' );
    wi.value  =  unescape(t(w));
    ps.innerHTML  =   ' 第 '   +  p.toString()  +   ' 页 ' ;
     if  (p  >   1 ) {
        pp.style.display  =   '' ;
        pp.href  =   ' baigoogledu_search.htm?w= '   +  w  +   ' &p= '   +  (p  -   1 ).toString();
    }
    np.href  =   ' baigoogledu_search.htm?w= '   +  w  +   ' &p= '   +  (p  +   1 ).toString();
     var  start  =   1 , end  =  p  +   10 ;
     if  (p  -   10   >  start)
        start  =  p  -   10 ;
     for  ( var  i  =  start; i  <=  end; i ++ ) {
         var  opt  =  document.createElement( ' option ' );
        opt.label  =  i.toString();
        opt.value  =  i.toString();
        opt.selected  =  p  ==  i;
        pl.appendChild(opt);
    }
    p  =  (p  -   1 )  *   10 ;
    google.href  =   ' http://www.google.cn/search?q= '   +  w  +   ' &start= '   +  p.toString();
    baidu.href  =   ' http://www.baidu.com/s?ie=utf-8&wd= '   +  w  +   ' &pn= '   +  p.toString();
}

　　至此算是把所有内容都说完了。其实还是最后的 ucs 和 utf-8 转换最为麻烦，耗费的时间也最多。

转载于:https://www.cnblogs.com/hust21941/archive/2008/08/13/baigoogledu2.html