1. 程式人生 > >將url的查詢參數解析成字典對象

將url的查詢參數解析成字典對象

function online lac () com 解決方案 mon url {}

  這個題目不約而同的出現在了多家公司的面試題中,當然也是因為太過於典型,解決方案無非就是拆字符或者用正則匹配來解決,我個人強烈建議用正則匹配,因為url允許用戶隨意輸入,如果用拆字符的方式,有任何一處沒有考慮到容錯,就會導致整個js都報錯。而正則就沒有這個問題,他只匹配出正確的配對,非法的全部過濾掉,簡單,方便。

  實現代碼:

1、手動解析

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火車票網上訂票官網"}

2、使用正則

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火車票網上訂票官網"}

將url的查詢參數解析成字典對象