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.