javascript收藏

Javascript解析URL的方法

URL: 统一资源定位符 (Uniform Resource Locator, URL)

完整的URL由这几个部分构成：
scheme://host:port/path?query#fragment
scheme = 通信协议 (常用的http,ftp,maito等)
host = 主机 (域名或IP)
port = 端口号
path = 路径
query = 查询
可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页）传递参数，可有多个参数，用”&”符号隔开，每个参数的名和值用”=”符号隔开。
fragment = 信息片断
字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。(也称为锚点)

对于这样一个URL
http://www.xxxxx.cn:80/dsaf/?ver=1.0&id=6#imhere

我们可以用javascript获得其中的各个部分
1, window.location.href
整个URl字符串(在浏览器中就是完整的地址栏)

2,window.location.protocol
URL 的协议部分
本例返回值:http:

3,window.location.host
URL 的主机部分
本例返回值:www.360happy.cn

4,window.location.port
URL 的端口部分
如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符
本例返回值:""

5,window.location.pathname
URL 的路径部分(就是文件地址)
本例返回值:/seo/

6,window.location.search
查询(参数)部分
除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值
本例返回值 ver=1.0&id=6

7,window.location.hash
锚点
本例返回值:#imhere

 

 

javascript 获取搜索引擎关键字并高亮显示

 

1. <script type= "text/javascript">
2. <!--
3. // 说明：获取搜索引擎关键字并高亮显示
4. // 整理：http://www.CodeBit.cn
5.  
6. /* http://www.kryogenix.org/code/browser/searchhi/ */
7. /* Modified 20021006 to fix query string parsing and add case insensitivity */
8. function highlightWord (node,word ) {
9.     // Iterate into this nodes childNodes
10.     if (node. hasChildNodes ) {
11.         var hi_cn;
12.         for (hi_cn= 0;hi_cn<node. childNodes. length;hi_cn++ ) {
13.             highlightWord (node. childNodes [hi_cn ],word );
14.         }
15.     }
16.     
17.     // And do this node itself
18.     if (node. nodeType == 3 ) { // text node
19.         tempNodeVal = node. nodeValue. toLowerCase ( );
20.         tempWordVal = word. toLowerCase ( );
21.         if (tempNodeVal. indexOf (tempWordVal ) != -1 ) {
22.             pn = node. parentNode;
23.             if (pn. className != "searchword" ) {
24.                 // word has not already been highlighted!
25.                 nv = node. nodeValue;
26.                 ni = tempNodeVal. indexOf (tempWordVal );
27.                 // Create a load of replacement nodes
28.                 before = document. createTextNode (nv. substr ( 0,ni ) );
29.                 docWordVal = nv. substr (ni,word. length );
30.                 after = document. createTextNode (nv. substr (ni+word. length ) );
31.                 hiwordtext = document. createTextNode (docWordVal );
32.                 hiword = document. createElement ( "span" );
33.                 hiword. className = "searchword";
34.                 hiword. appendChild (hiwordtext );
35.                 pn. insertBefore (before,node );
36.                 pn. insertBefore (hiword,node );
37.                 pn. insertBefore (after,node );
38.                 pn. removeChild (node );
39.             }
40.         }
41.     }
42. }
43.  
44. function googleSearchHighlight ( ) {
45.     if (!document. createElement ) return;
46.     ref = document. referrer;
47.     if (ref. indexOf ( '?' ) == -1 ) return;
48.     qs = ref. substr (ref. indexOf ( '?' ) +1 );
49.     qsa = qs. split ( '&' );
50.     for (i= 0;i<qsa. length;i++ ) {
51.         qsip = qsa [i ]. split ( '=' );
52.         if (qsip. length == 1 ) continue;
53.         if (qsip [ 0 ] == 'q' || qsip [ 0 ] == 'p' ) { // q= for Google, p= for Yahoo
54.             words = unescape (decodeURIComponent (qsip [ 1 ]. replace ( /\+/g, ' ' ) ) ). split ( /\s+/ );
55.             for (w= 0;w<words. length;w++ ) {
56.                 highlightWord (document. getElementsByTagName ( "body" ) [ 0 ],words [w ] );
57.             }
58.         }
59.     }
60. }
61.  
62. window. onload = googleSearchHighlight;
63.  
64. //-->
65. </script>
66.  

同时，您需要为要高亮的关键词设置一个样式：
CSS:

  
  

   
   
 
    

        
    
   
   
 
    

      <style type= 
     "text/css"> 
    
   
   
 
    
 
     .searchword  
     { 
    
   
   
 
    
 
     background-color: 
     yellow; 
    
   
   
 
    
 
     } 
    
   
   
 
    

      </style> 
    
   
   
 
    

        
    
  
  

实现原理：在页面加载完成时获取页面来源（document.referrer），并分析搜索引擎关键词，然后获取页面上所有元素，递归查询是否含有搜索关键字，如果有，就创建一个 span 元素，并应用关键词样式，替换原有节点。

用 Javascript 实现检测、添加、移除样式（className）

1. <script type= "text/javascript">
2.  
3. // 说明：添加、移除、检测 className
4. // 整理：CodeBit.cn ( http://www.codebit.cn )
5.  
6. function hasClass (element, className ) {
7.     var reg = new RegExp ( '(\\s|^)'+className+ '(\\s|$)' );
8.     return element. className. match (reg );
9. }
10.  
11. function addClass (element, className ) {
12.     if (! this. hasClass (element, className ) )
13.     {
14.         element. className += " "+className;
15.     }
16. }
17.  
18. function removeClass (element, className ) {
19.     if (hasClass (element, className ) ) {
20.         var reg = new RegExp ( '(\\s|^)'+className+ '(\\s|$)' );
21.         element. className = element. className. replace (reg, ' ' );
22.     }
23. }
24.  
25. </script>
26.