url查詢參數解析

url查詢參數解析

1.獲取url的各部分值

舉例http://i.cnblogs.com/EditPosts.aspx?opt=1

1、window.location.href(設置或獲取整個 URL 為字符串) var test = window.location.href; alert(test); 返回：http://i.cnblogs.com/EditPosts.aspx?opt=1

2、window.location.protocol(設置或獲取 URL 的協議部分)

var test = window.location.protocol;
alert(test);
返回：http:

3、window.location.host(設置或獲取 URL 的主機部分)

var test = window.location.host;
alert(test);
返回：i.cnblogs.com

4、window.location.port(設置或獲取與 URL 關聯的端口號碼)

var test = window.location.port;
alert(test);
返回：空字符(如果采用默認的80端口(update:即使添加了:80)，那么返回值並不是默認的80而是空字符)

5、window.location.pathname(設置或獲取與 URL 的路徑部分（就是文件地址）)
var test = window.location.pathname;
alert(test);
返回：/EditPosts.aspx

6、window.location.search(設置或獲取 href 屬性中跟在問號后面的部分)

var test = window.location.search;
alert(test);
返回：?opt=1

PS：獲得查詢（參數）部分，除了給動態語言賦值以外，我們同樣可以給靜態頁面，並使用javascript來獲得相信應的參數值。

7、window.location.hash(設置或獲取 href 屬性中在井號“#”后面的分段)

var test = window.location.hash;
alert(test);
返回：空字符(因為url中沒有)

2.將url查詢參數通過正則表達式解析成數據字典

function getQueryObject(url) {
        url = url == null ? window.location.href : url;
        var search = url.substring(url.lastIndexOf("?") + 1);
        var obj = {};
        var reg = /([^?&=]+)=([^?&=]*)/g;
        // [^?&=]+表示：除了？、&、=之外的一到多個字符
        // [^?&=]*表示：除了？、&、=之外的0到多個字符（任意多個）
        search.replace(reg, function (rs, $1, $2) {
            var name = decodeURIComponent($1);
            var val = decodeURIComponent($2);
            val = String(val);
            obj[name] = val;
            return rs;
        });
        return obj;
    }
    console.log(getQueryObject('https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd=12306%E7%81%AB%E8%BD%A6%E7%A5%A8%E7%BD%91%E4%B8%8A%E8%AE%A2%E7%A5%A8%E5%AE%98%E7%BD%91'));
    // Object {tn: "monline_3_dg", ie: "utf-8", wd: "12306火車票網上訂票官網"}

3.將url查詢參數手動解析成數據字典

function getQueryStringArgs(url){
        url = url == null ? window.location.href : url;
        var qs = url.substring(url.lastIndexOf("?") + 1);
        var args = {};
        var items = qs.length > 0 ? qs.split('&') : [];
        var item = null;
        var name = null;
        var value = null;
        for(var i=0; i<items.length; i++){
            item = items[i].split("=");
            //用decodeURIComponent()分別解碼name 和value（因為查詢字符串應該是被編碼過的）。
            name = decodeURIComponent(item[0]);
            value = decodeURIComponent(item[1]);

            if(name.length){
                args[name] = value;
            }
        }

        return args;
    }
console.log(getQueryStringArgs('https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd=12306%E7%81%AB%E8%BD%A6%E7%A5%A8%E7%BD%91%E4%B8%8A%E8%AE%A2%E7%A5%A8%E5%AE%98%E7%BD%91'));
    // Object {tn: "monline_3_dg", ie: "utf-8", wd: "12306火車票網上訂票官網"}