通過Javascript得到URL中的參數(query string)

我們知道，"GET"請求中，通常把參數放在URL后面，比如這樣
http://www.cnblogs.com/season-huang/index?param=yes&article=1
其中，紅色部分便是URL中的參數。

那么，如何通過Javascript得到它呢？而且怎么從這么一堆字符串中找到我所需要的參數所對應的值呢？

方法一：

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
    return results == null ? "": decodeURIComponent(results[1]);
}

console.log(getParameterByName("param")) //yes

先來解釋下這段代碼吧：

1：定義一個 getParameterByName 函數，接收需要查詢的參數的key，然后返回這個參數的value

2：name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
這句代碼的作用是把 "["  換成 "\[" , 把 "]" 換成 "\]" ，之所以做這么一個轉換，是因為下面需要使用name這個變量去構造一個正則表達式，而 [ 和 ] 在正則中是關鍵字，所以需要轉義。

3 var regex = new RegExp("[\\?&]" + name + "=([^&#]*)")

這句代碼比較簡單，匹配 ? 或者 & 然后是 name 然后是 = 和 非（&或者#）。

4 results = regex.exec(location.search); return results == null ? "" : decodeURIComponent(results[1]);

這兩句放一起看把，首先 location.search 拿到全部的查詢字符串（即文章最開頭給的范例URL中紅色部分），然后使用正則的exec方法去匹配出結果，這個方法會返回一個數組，在這個例子里面，results這個數組為["?params=yes","yes"]。這里要說明下，因為在正則中，給匹配出yes的部分加了個括號分組，所以結果中數組的第二項（results[1]）為yes。

 

這個函數的確寫的很優雅，很強大。但是呢，有一個缺點，就是每次我需要查詢的一個參數的時候，都需要進行這么一個過程，構造正則，匹配location.search，返回結果。但是很明顯，當我們頁面載入完成的時候，URL是固定的，不會變得（不考慮html5 history api），所以每次進行這么一個過程很浪費資源，所以有了下面這個方法。

 

方法二

var urlParams; 
(window.onpopstate = function() {
    var match,
    pl = /\+/g,
    search = /([^&=]+)=?([^&]*)/g,
    decode = function(s) {
        return decodeURIComponent(s.replace(pl, " "));
    },
    query = window.location.search.substring(1);
    urlParams = {};
    while (match = search.exec(query))
       urlParams[decode(match[1])] = decode(match[2]);
})();

　　//urlParams的結果
    urlParams = {
      param: "yes",
      article: "1"
    }

    console.log(urlParams["param"]);  // -> "yes"
    console.log("article" in urlParams);  // -> true

這段代碼比較簡單，唯一要說明的是 pl = /\+/g, s.replace(pl, " ")); 之所以會有這么一句，是因為在URL規范里面，加號(+)會被編碼為空格，所有在decode的時候，需要把加號轉回空格去。

這個方法里面，當頁面加載完成時，會把URL中所有參數放在urlParams這個對象里面。之后只需要查找這個對象的屬性就可以找到相應的結果了。

在實際工作中，個人認為，這種方法比第一種可取。

 

方法三

var qs = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i)
    {
        var p=a[i].split('=');
        if (p.length != 2) continue;
        b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return b;
})(window.location.search.substr(1).split('&'));

  qs["param"]; // yes
  qs["article"]; // 1
  qs["nothere"]; // undefined (object)

比較簡單明了,這里對代碼就不做解釋了。和方法二一樣，把結果存儲在qs這個對象里面。

 

方法四

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

如果是在一個頁面里偶爾用一次，並且對代碼的字節數有強迫症的人，可以使用這個方法。

 

最后，有一些jQuery插件也實現了這樣的功能。不過個人認為這種小方法寫成插件形式並不是很有必要的感覺，所以在這里就不列舉出來了，可以自行谷歌。

 

本文參考 : http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values

 

轉載本站文章請注明作者和出處 奇葩一朵朵 – http://www.cnblogs.com/season-huang/ ，請勿用於任何商業用途