javascript - 在JavaScript如何獲取查詢的字元串值?

  显示原文与译文双语对照的内容

有plugin-less檢索查詢字元串的方式通過jquery( 或者沒有) 值?

如果是,如何如果沒有,有一個插件可以這樣做?

时间:

你不需要jQuery為此目的。 你只可以使用一些純 JavaScript:


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

用法:


var prodId = getParameterByName('prodId');

這裡發布的一些解決方案是低效的。 每次重複的正則表達式搜索腳本需要訪問一個參數是完全不必要的,一個函數的參數分成一個associative-array樣式對象就足夠了。 如果你不使用 HTML 5歷史 API,那麼每次頁面載入只需要一次。 這裡的其他建議也無法正確解碼 URL 。


var urlParams;
(window.onpopstate = function () {
 var match,
 pl =/+/g,//Regex for replacing addition symbol with a space
 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]);
})();

示例 QueryString:

?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty

結果:


 urlParams = {
 enc:" Hello",
 i:"main",
 mode:"front",
 sid:"de8d49b78a85a322c4155015fdce22c4",
 empty:""
}

alert(urlParams["mode"]);
//->"front"

alert("empty" in urlParams);
//-> true

這很容易被改進來處理array-style查詢字元串。 這是的一個例子,但由於array-style中定義的參數不是 RFC 3986我不會污染這個答案的源代碼。 "已經被污染"版本對那些感興趣,看看答案campbeln以下。

同樣,就像註釋中指出的,;key=value 對的合法分隔符。 它是所有complicated 正規表達式 ;& 黃金handle to whichi,確保各不相同,因此馬來西亞think is ; 罕見的,將不屬此例andi,尤其是因為這些部門不大可能say even moreboth元。 如果你需要支持 ; 而不是 &,只需在 正規表達式 中交換它們。


如果你正在使用server-side預處理語言,你可能想要使用它的原生JSON函數來為你做繁重的提升。 例如在PHP中,你可以編寫:
<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>

簡單得多 !

沒有 jQuery


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

使用像 ?topic=123&name=query+string 這樣的URL,下面將返回:


qs["topic"];//123
qs["name"];//query string
qs["nothere"];//undefined (object)


谷歌方法

刪除谷歌的代碼找到了他們使用的方法: getUrlParameters


function (b) {
 var c = typeof b ==="undefined";
 if (a!== h && c) return a;
 for (var d = {}, b = b || k[B][vb], e = b[p]("?"), f = b[p]("#"), b = (f === -1? b[Ya](e + 1) : [b[Ya](e + 1, f - e - 1),"&", b[Ya](f + 1)][K](""))[z]("&"), e = i.dd? ia : unescape, f = 0, g = b[w]; f <g; ++f) {
 var l = b[f][p]("=");
 if (l!== -1) {
 var q = b[f][I](0, l),
 l = b[f][I](l + 1),
 l = l[Ca](/+/g,"");
 try {
 d[q] = e(l)
 } catch (A) {}
 }
 }
 c && (a = d);
 return d
}

它是模糊的,但這是可以理解的。

他們開始尋找來自 ?的url參數,也從哈希 # 中查找參數。 然後對於它們在等號 b[f][p]("=") ( 它看起來像 indexOf,它們使用字元的位置來獲取鍵/值) 中分割的每個參數。 讓它分割,他們檢查參數是否有值,如果它存儲了 d的值,如果不是,則繼續。

最後返回對象 d,處理轉義和 + 符號。 這個對象跟我的一樣,它有同樣的行為。


我的方法是的jQuery插件


(function($) {
 $.QueryString = (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('&'))
})(jQuery);

用法


$.QueryString["param"]


性能測試( 針對 正規表達式 方法的分割方法) ( jsPerf )

準備代碼:方法聲明

拆分測試代碼


var qs = window.GetQueryString(query);

var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];

正規表達式 測試代碼


var search = window.getParameterByName("q");
var value = window.getParameterByName("value");
var undef = window.getParameterByName("undefinedstring");

Firefox 4.0在 Windows Server 2008 r2/7 x64 上的測試

  • 分方法: 144,780 ±2.17%最快
  • 正規表達式 方法: 13,891 ±0.85% | 90%較慢

改進版本的Artem答案 barger:


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

有關改進的詳細信息,請參閱: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/

只是另一個建議。插件 插件 允許檢索URL的所有部分,包括錨點,主機等。

它可以和jQuery一起使用。

用法非常簡單且很酷:


var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value');//jQuery version
var url = purl('http://allmarkedup.com/folder/dir/index.html?item=value');//plain JS version
url.attr('protocol');//returns 'http'
url.attr('path');//returns '/folder/dir/index.html'

Roshambo上的有一個非常熱門和簡單的腳本,它可以在 獲取URL參數使用 jQuery | 改進的 。 使用他的腳本,你也很容易地提取出你想要的參數。

下面是要點:


$.urlParam = function(name, url) {
 if (!url) {
 url = window.location.href;
 }
 var results = new RegExp('[?&]' + name + '=([^&#]*)').exec(url);
 if (!results) { 
 return undefined;
 }
 return results[1] || undefined;
}

然後從查詢字元串中獲取參數。

所以如果 url/查詢字元串是 xyz.com/index.html?lang=de

只調用 var langval = $.urlParam('lang'); ,你已經知道了。

UZBEKJON也有一個很棒的博客文章,通過 jQuery 獲取URL參數&值。

如果你使用的是 jQuery,你可以使用一個庫,比如 jQuery燒烤: 返回按鈕&查詢庫 。

。jquery燒烤提供完整的.deparam() 方法,這兩個散列狀態管理,和片段/查詢字元串解析和合併的實用方法。

編輯:添加Deparam示例:


 var DeparamExample = function() {
 var params = $.deparam.querystring();

//nameofparam is the name of a param from url
//code below will get param if ajax refresh with hash
 if (typeof params.nameofparam == 'undefined') {
 params = jQuery.deparam.fragment(window.location.href);
 }
 
 if (typeof params.nameofparam!= 'undefined') {
 var paramValue = params.nameofparam.toString();
 
 }
 };

如果你只想使用純 JavaScript,你可以使用,。


var getParamValue = (function() {
 var params;
 var resetParams = function() {
 var query = window.location.search;
 var regex =/[?&;](.+?)=([^&;]+)/g;
 var match;

 params = {};

 if (query) {
 while (match = regex.exec(query)) {
 params[match[1]] = decodeURIComponent(match[2]);
 }
 } 
 };

 window.addEventListener
 && window.addEventListener('popstate', resetParams);

 resetParams();

 return function(param) {
 return params.hasOwnProperty(param)? params[param] : null;
 }

})();​

由於新的HTML歷史 API,特別是 history.pushState()history.replaceState(),URL可以改變參數的緩存和它們的值。

這裡版本將在每次更改歷史時更新它的內部緩存的參數。

下面是我將Andy出色地融入到一個成熟的jQuery插件中的技巧:


;(function ($) {
 $.extend({ 
 getQueryString: function (name) { 
 function parseParams() {
 var params = {},
 e,
 a =/+/g,//Regex for replacing addition symbol with a space
 r =/([^&=]+)=?([^&]*)/g,
 d = function (s) { return decodeURIComponent(s.replace(a,"")); },
 q = window.location.search.substring(1);

 while (e = r.exec(q))
 params[d(e[1])] = d(e[2]);

 return params;
 }

 if (!this.queryStringParams)
 this.queryStringParams = parseParams(); 

 return this.queryStringParams[name];
 }
 });
})(jQuery);

語法是:


var someVar = $.getQueryString('myParam');

兩全其美 !

為什麼不只使用 2


function get(n) {
 var half = location.search.split(n + '=')[1];
 return half!== undefined? decodeURIComponent(half.split('&')[0]) : null;
 }

我正在閱讀以前和更完整的答案。 但我認為這是最簡單最快速的方法。 你可以檢查這個 jsPerf 基準

為了解決rup註釋中的問題,通過將第一行更改為下面的兩個,添加一個條件拆分。 但是絕對精度意味著它現在比正則表達式( 參見 jsPerf web ) 慢。


function get(n) {
 var half = location.search.split('&' + n + '=')[1];
 if (!half) half = location.search.split('?' + n + '=')[1];
 return half!== undefined? decodeURIComponent(half.split('&')[0]) : null;
}

所以如果你知道你不會碰到rup的counter-case,這就會勝出。 否則,正則表達式。

tl;博士

快速、完整的解決方案,處理多值鍵 編碼字元。


var qd = {};
location.search.substr(1).split("&").forEach(function(item) {var k = item.split("=")[0], v = decodeURIComponent(item.split("=")[1]); (k in qd)? qd[k].push(v) : qd[k] = [v,]})

例如:


"?a=1&b=2&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle&car%3Dsaab"
> qd
a: ["1","5","t e x t"]
b: ["2"]
c: ["3"]
d: [undefined]
e: [undefined,"http://w3schools.com/my test.asp?name=ståle&car=saab"] 


閱讀更多。。關於JavaScript的解決方案

訪問url的不同部分使用 location.(search|hash)

最簡單的( dummy ) 解決方案


var queryDict = {}
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})

  • 正確處理空密鑰
  • 覆蓋 multi-keys最後價值發現。

"?a=1&b=2&c=3&d&e&a=5"
> queryDict
a:"5"
b:"2"
c:"3"
d: undefined
e: undefined

multi-valued鍵

簡單密鑰檢查 (item in dict)? dict.item.push(val) : dict.item = [val,]


var qd = {}
location.search.substr(1).split("&").forEach(function(item) {(item.split("=")[0] in qd)? qd[item.split("=")[0]].push(item.split("=")[1]) : qd[item.split("=")[0]] = [item.split("=")[1],]})

  • 現在返回英鎊的數組。
  • 通過 qd.key[index] 或者 qd[key][index] 訪問值

> qd
a: ["1","5"]
b: ["2"]
c: ["3"]
d: [undefined]
e: [undefined]

> qd.a[1]//"5"
> qd["a"][1]//"5"

編碼字元?

item.split("=")[1] 置於 decodeURIComponent(item.split("=")[1])
( 如頂部所示)


"?a=1&b=2&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle&car%3Dsaab"
> qd
a: ["1","5","t e x t"]
b: ["2"]
c: ["3"]
d: [undefined]
e: [undefined,"http://w3schools.com/my test.asp?name=ståle&car=saab"]

...