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"]

...