如何在JavaScript中获取查询字符串值?

有没有通过jQuery(或没有)检索查询字符串值的无插件方法?

如果是,如何?如果不是,有没有插件可以做到这一点?

4896967 次浏览

如果您使用的是jQuery,则可以使用库,例如jQuery BBQ:返回按钮和查询库

… jQuery BBQ提供了一个完整的.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 hashif (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;}
})();​

由于新的超文本标记语言历史API,特别是history.pushState()history.replaceState(),URL可以更改,这将使参数及其值的缓存无效。

此版本将在每次历史记录更改时更新其内部参数缓存。

更新:2022年1月

使用#0更快比使用#1和更好的支持

const params = new Proxy(new URLSearchParams(window.location.search), {get: (searchParams, prop) => searchParams.get(prop),});// Get the value of "some_key" in eg "https://example.com/?some_key=some_value"let value = params.some_key; // "some_value"

更新时间:2021年6月-2021年

对于需要所有查询参数的特定情况:

const urlSearchParams = new URLSearchParams(window.location.search);const params = Object.fromEntries(urlSearchParams.entries());

更新:Sep-2018

您可以使用参数名URLSearchParams,它很简单并且具有良好(但不完整)的浏览器支持

const urlParams = new URLSearchParams(window.location.search);const myParam = urlParams.get('myParam');

原始

为此,您不需要jQuery。您可以只使用一些纯JavaScript:

function getParameterByName(name, url = window.location.href) {name = name.replace(/[\[\]]/g, '\\$&');var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),results = regex.exec(url);if (!results) return null;if (!results[2]) return '';return decodeURIComponent(results[2].replace(/\+/g, ' '));}

用法:

// query string: ?foo=lorem&bar=&bazvar foo = getParameterByName('foo'); // "lorem"var bar = getParameterByName('bar'); // "" (present with empty value)var baz = getParameterByName('baz'); // "" (present with no value)var qux = getParameterByName('qux'); // null (absent)

注意:如果一个参数出现多次(?foo=lorem&foo=ipsum),您将获得第一个值(lorem)。这没有标准,用法也各不相同,例如请参阅这个问题:重复HTTP GET查询密钥的权威位置

注意:该函数区分大小写。如果您更喜欢不区分大小写的参数名称,将'i'修饰符添加到RegExp

注意:如果您收到一个无用的转义eslint错误,您可以将name = name.replace(/[\[\]]/g, '\\$&');替换为name = name.replace(/[[\]]/g, '\\$&')


这是基于新的URLSearchParams规范的更新,以更简洁地实现相同的结果。请参阅下面标题为“参数名URLSearchParams”的答案。

Roshambosnipplr.com有一个简单的脚本来实现使用jQuery获取URL参数|改进中描述的这个功能。使用他的脚本,您也可以轻松地提取您想要的参数。

这里是要点:

$.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.example/index.html?lang=de

只需调用var langval = $.urlParam('lang');,你就可以得到它。

UZBEKJON也有一个很棒的博客文章,使用jQuery获取URL参数和值

这里发布的一些解决方案效率低下。每次脚本需要访问参数时重复正则表达式搜索是完全没有必要的,一个将参数拆分为关联数组样式对象的函数就足够了。如果你不使用超文本标记语言5 History API,每个页面加载只需要一次。这里的其他建议也无法正确解码URL。

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

示例查询字符串:

?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

这也可以很容易地改进以处理数组风格的查询字符串。这方面的一个例子是这里,但由于数组风格的参数没有在rfc3986中定义,我不会用源代码污染这个答案。对于那些对“污染”版本感兴趣的人,请看下面Campbeln的回答

此外,正如评论中指出的,;key=value对的合法分隔符。处理;&需要更复杂的正则表达式,我认为这是不必要的,因为很少使用;,我想说更不可能同时使用两者。如果你需要支持;而不是&,只需在正则表达式中交换它们。


如果您使用的是服务器端预处理语言,您可能希望使用其原生JSON函数来为您完成繁重的工作。例如,在PHP中,您可以编写:
<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>

Much simpler!

#UPDATED

A new capability would be to retrieve repeated params as following myparam=1&myparam=2. There is not a specification, however, most of the current approaches follow the generation of an array.

myparam = ["1", "2"]

所以,这是管理它的方法:

let urlParams = {};(window.onpopstate = function () {let match,pl = /\+/g,  // Regex for replacing addition symbol with a spacesearch = /([^&=]+)=?([^&]*)/g,decode = function (s) {return decodeURIComponent(s.replace(pl, " "));},query = window.location.search.substring(1);
while (match = search.exec(query)) {if (decode(match[1]) in urlParams) {if (!Array.isArray(urlParams[decode(match[1])])) {urlParams[decode(match[1])] = [urlParams[decode(match[1])]];}urlParams[decode(match[1])].push(decode(match[2]));} else {urlParams[decode(match[1])] = decode(match[2]);}}})();
function GET() {var data = [];for(x = 0; x < arguments.length; ++x)data.push(location.href.match(new RegExp("/\?".concat(arguments[x],"=","([^\n&]*)")))[1])return data;}

example:data = GET("id","name","foo");query string : ?id=3&name=jet&foo=breturns:data[0] // 3data[1] // jetdata[2] // boralert(GET("id")[0]) // return 3

ES2015(ES6)

getQueryStringParams = query => {return query? (/^[?#]/.test(query) ? query.slice(1) : query).split('&').reduce((params, param) => {let [key, value] = param.split('=');params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';return params;}, {}): {}};

没有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]] = "";elseb[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));}return b;})(window.location.search.substr(1).split('&'));

使用像?topic=123&name=query+string这样的URL,将返回以下内容:

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

google方法

撕开Google的代码,我找到了他们使用的方法: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,他们使用char的位置来获取键/值)。拆分后,他们检查参数是否有值,如果有,则存储d的值,否则他们只是继续。

最后返回对象d,处理转义和+符号。这个对象就像我的一样,它有相同的行为。


我的方法jQuery插件

(function($) {$.QueryString = (function(paramsArray) {let params = {};
for (let i = 0; i < paramsArray.length; ++i){let param = paramsArray[i].split('=', 2);            
if (param.length !== 2)continue;            
params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " "));}            
return params;})(window.location.search.substr(1).split('&'))})(jQuery);

用法

//Get a param$.QueryString.param//-or-$.QueryString["param"]//This outputs something like...//"val"
//Get all params as object$.QueryString//This outputs something like...//Object { param: "val", param2: "val" }
//Set a param (only in the $.QueryString object, doesn't affect the browser's querystring)$.QueryString.param = "newvalue"//This doesn't output anything, it just updates the $.QueryString object
//Convert object into string suitable for url a querystring (Requires jQuery)$.param($.QueryString)//This outputs something like...//"param=newvalue&param2=val"
//Update the url/querystring in the browser's location bar with the $.QueryString objecthistory.replaceState({}, '', "?" + $.param($.QueryString));//-or-history.pushState({}, '', "?" + $.param($.QueryString));

性能测试(拆分方法对regex方法)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");

在Windows Server 2008 R2/7 x64上的Firefox 4.0 x86中进行测试

  • 拆分法:144,780±2.17%最快
  • 正则表达式法:13,891±0.85%|慢90%

这是我将Andy E的优秀解决方案制作成一个完整的jQuery插件的尝试:

;(function ($) {$.extend({getQueryString: function (name) {function parseParams() {var params = {},e,a = /\+/g,  // Regex for replacing addition symbol with a spacer = /([^&=]+)=?([^&]*)/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');

最好的两个世界!

这里是我在GitHub上的查询字符串解析代码版本

它以jQuery.*为“前缀”,但解析函数本身不使用jQuery。它非常快,但仍然可以进行一些简单的性能优化。

它还支持URL中的列表和哈希表编码,例如:

arr[]=10&arr[]=20&arr[]=100

hash[key1]=hello&hash[key2]=moto&a=How%20are%20you

jQuery.toQueryParams = function(str, separator) {separator = separator || '&'var obj = {}if (str.length == 0)return objvar c = str.substr(0,1)var s = c=='?' || c=='#'  ? str.substr(1) : str;
var a = s.split(separator)for (var i=0; i<a.length; i++) {var p = a[i].indexOf('=')if (p < 0) {obj[a[i]] = ''continue}var k = decodeURIComponent(a[i].substr(0,p)),v = decodeURIComponent(a[i].substr(p+1))
var bps = k.indexOf('[')if (bps < 0) {obj[k] = vcontinue;}
var bpe = k.substr(bps+1).indexOf(']')if (bpe < 0) {obj[k] = vcontinue;}
var bpv = k.substr(bps+1, bps+bpe-1)var k = k.substr(0,bps)if (bpv.length <= 0) {if (typeof(obj[k]) != 'object') obj[k] = []obj[k].push(v)} else {if (typeof(obj[k]) != 'object') obj[k] = {}obj[k][bpv] = v}}return obj;
}

代码高尔夫:

var a = location.search&&location.search.substr(1).replace(/\+/gi," ").split("&");for (var i in a) {var s = a[i].split("=");a[i]  = a[unescape(s[0])] = unescape(s[1]);}

展示它!

for (i in a) {document.write(i + ":" + a[i] + "<br/>");};

在我的Mac上:test.htm?i=can&has=cheezburger显示

0:can1:cheezburgeri:canhas:cheezburger

Roshambo jQuery方法没有照顾解码URL

http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/

在添加返回语句时也添加了该功能

return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;

现在你可以找到更新的要点:

$.urlParam = function(name){var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);if (!results) { return 0; }return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;}

这是我不久前创建的一个函数,我很满意。它不区分大小写-这很方便。此外,如果请求的QS不存在,它只会返回一个空字符串。

我使用的是压缩版本。我为新手类型发布未压缩的版本,以更好地解释发生了什么。

我相信这可以进行优化或以不同的方式更快地工作,但它总是非常适合我需要的东西。

好好享受。

function getQSP(sName, sURL) {var theItmToRtn = "";var theSrchStrg = location.search;if (sURL) theSrchStrg = sURL;var sOrig = theSrchStrg;theSrchStrg = theSrchStrg.toUpperCase();sName = sName.toUpperCase();theSrchStrg = theSrchStrg.replace("?", "&") theSrchStrg = theSrchStrg + "&";var theSrchToken = "&" + sName + "=";if (theSrchStrg.indexOf(theSrchToken) != -1) {var theSrchTokenLth = theSrchToken.length;var theSrchTokenLocStart = theSrchStrg.indexOf(theSrchToken) + theSrchTokenLth;var theLocOfNextAndSign = theSrchStrg.indexOf("&", theSrchTokenLocStart);theItmToRtn = unescape(sOrig.substring(theSrchTokenLocStart, theLocOfNextAndSign));}return unescape(theItmToRtn);}

阿特姆·巴格的回答的改进版本:

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/

我经常使用正则表达式,但不是为此。

对我来说,在我的应用程序中读取一次查询字符串并从所有键/值对构建一个对象似乎更容易、更有效,例如:

var search = function() {var s = window.location.search.substr(1),p = s.split(/\&/), l = p.length, kv, r = {};if (l === 0) {return false;}while (l--) {kv = p[l].split(/\=/);r[kv[0]] = decodeURIComponent(kv[1] || '') || true;}return r;}();

对于像http://example.com?param1=val1&param2=val2这样的URL,您可以稍后在代码中以search.param1search.param2的形式获取它们的值。

只是另一个建议。插件Purl允许检索URL的所有部分,包括锚点、主机等。

它可以使用或不使用jQuery。

用法非常简单和酷:

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

然而,自2014年11月11日起,Purl不再维护,作者建议使用URI.js代替。jQuery插件的不同之处在于它专注于元素——对于字符串的使用,直接使用URI即可,无论是否使用jQuery。类似的代码看起来也会如此,更完整的文档这里

var url = new URI('http://example.com/folder/dir/index.html?item=value'); // plain JS versionurl.protocol(); // returns 'http'url.path(); // returns '/folder/dir/index.html'

对于这个操作,我宁愿使用split()而不是Regex:

function getUrlParams() {var result = {};var params = (window.location.search.split('?')[1] || '').split('&');for(var param in params) {if (params.hasOwnProperty(param)) {var paramParts = params[param].split('=');result[paramParts[0]] = decodeURIComponent(paramParts[1] || "");}}return result;}

我使用这个答案并添加了对可选地将URL作为参数传递的支持;回到window.location.search.显然,这对于从不是当前页面的URL获取查询字符串参数很有用:

(function($, undef) {$.QueryString = function(url) {var pairs, qs = null, index, map = {};if(url == undef){qs = window.location.search.substr(1);}else{index = url.indexOf('?');if(index == -1) return {};qs = url.substring(index+1);}pairs = qs.split('&');if (pairs == "") return {};for (var i = 0; i < pairs.length; ++i){var p = pairs[i].split('=');if(p.length != 2) continue;map[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));}return map;};})(jQuery);

这是我对这个出色的答案的编辑-增加了使用不带值的键解析查询字符串的能力。

var url = 'http://sb.com/reg/step1?param';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[1]) p[1] = decodeURIComponent(p[1].replace(/\+/g, " "));b[p[0]] = p[1];}return b;})((url.split('?'))[1].split('&'));

重要!最后一行中该函数的参数不同。这只是一个如何将任意URL传递给它的示例。您可以使用Bruno答案中的最后一行来解析当前URL。

那么到底发生了什么变化?对于urlhttp://sb.com/reg/step1?param=,结果将是相同的。但是对于urlhttp://sb.com/reg/step1?param,布鲁诺的解决方案返回一个没有键的对象,而我的解决方案返回一个具有键paramundefined值的对象。

以下代码将创建一个包含两个方法的对象:

  1. isKeyExist:检查是否存在特定参数
  2. getValue:获取特定参数的值。

var QSParam = new function() {var qsParm = {};var query = window.location.search.substring(1);var params = query.split('&');for (var i = 0; i < params.length; i++) {var pos = params[i].indexOf('=');if (pos > 0) {var key = params[i].substring(0, pos);var val = params[i].substring(pos + 1);qsParm[key] = val;}}this.isKeyExist = function(query){if(qsParm[query]){return true;}else{return false;}};this.getValue = function(query){if(qsParm[query]){return qsParm[query];}throw "URL does not contain query "+ query;}};

试试这个:

String.prototype.getValueByKey = function(k){var p = new RegExp('\\b'+k+'\\b','gi');return this.search(p) != -1 ? decodeURIComponent(this.substr(this.search(p)+k.length+1).substr(0,this.substr(this.search(p)+k.length+1).search(/(&|;|$)/))) : "";};

然后这样称呼它:

if(location.search != "") location.search.getValueByKey("id");

您也可以将其用于cookies

if(navigator.cookieEnabled) document.cookie.getValueByKey("username");

这仅适用于具有key=value[&|;|$]…将不适用于对象/数组的字符串。

如果你想使用不要…将其移动到一个函数并将字符串作为参数传递

我喜欢Ryan Phelan的解决方案。但我看不到为此扩展jQuery的任何意义?没有使用jQuery功能。

另一方面,我喜欢GoogleChrome中的内置函数:window.location.get参数。

那么为什么不使用这个呢?好吧,其他浏览器没有。所以如果它不存在,让我们创建这个函数:

if (!window.location.getParameter ) {window.location.getParameter = function(key) {function parseParams() {var params = {},e,a = /\+/g,  // Regex for replacing addition symbol with a spacer = /([^&=]+)=?([^&]*)/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[key];};}

这个函数或多或少来自Ryan Phelan,但它的包装方式不同:清晰的名称,没有其他javascript库的依赖项。更多关于这个功能在我的博客

function getUrlVar(key){var result = new RegExp(key + "=([^&]*)", "i").exec(window.location.search);return result && unescape(result[1]) || "";}

https://gist.github.com/1771618

在纯JavaScript代码中保持简单:

function qs(key) {var vars = [], hash;var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');for(var i = 0; i < hashes.length; i++){hash = hashes[i].split('=');vars.push(hash[0]);vars[hash[0]] = hash[1];}return vars[key];}

从JavaScript代码中的任何地方调用它:

var result = qs('someKey');

如果你正在做更多的URL操作,而不是简单地解析查询字符串,你可能会发现URI.js很有帮助。它是一个用于操作URL的库-并且带有所有的花哨。(抱歉在这里自我广告)

将您的查询字符串转换为映射:

var data = URI('?foo=bar&bar=baz&foo=world').query(true);data == {"foo": ["bar", "world"],"bar": "baz"}

(URI.js还“修复”了错误的查询字符串,例如?&foo&&bar=baz&?foo&bar=baz

这是我自己的看法。第一个函数将URL字符串解码为名称/值对的对象:

url_args_decode = function (url) {var args_enc, el, i, nameval, ret;ret = {};// use the DOM to parse the URL via an 'a' elementel = document.createElement("a");el.href = url;// strip off initial ? on search and splitargs_enc = el.search.substring(1).split('&');for (i = 0; i < args_enc.length; i++) {// convert + into space, split on =, and then decodeargs_enc[i].replace(/\+/g, ' ');nameval = args_enc[i].split('=', 2);ret[decodeURIComponent(nameval[0])]=decodeURIComponent(nameval[1]);}return ret;};

作为额外的奖励,如果您更改了一些参数,您可以使用第二个函数将参数数组放回URL字符串中:

url_args_replace = function (url, args) {var args_enc, el, name;// use the DOM to parse the URL via an 'a' elementel = document.createElement("a");el.href = url;args_enc = [];// encode args to go into urlfor (name in args) {if (args.hasOwnProperty(name)) {name = encodeURIComponent(name);args[name] = encodeURIComponent(args[name]);args_enc.push(name + '=' + args[name]);}}if (args_enc.length > 0) {el.search = '?' + args_enc.join('&');} else {el.search = '';}return el.href;};
http://someurl.com?key=value&keynovalue&keyemptyvalue=&&keynovalue=nowhasvalue#somehash
  • 常规键/值对(?param=value
  • 键w/o值(?param:没有等号或值)
  • 键w/空值(?param=:等号,但等号右边没有值)
  • 重复键(?param=1&param=2
  • 删除空键(?&&:没有键或值)

代码:

  • var queryString=window.location.search || '';var keyValP的值=[];变量参数={};queryString=queryString.substr(1);//查询用例 如果(queryString.length){queryString.split('&');for(key中的对){如果(!key.length)继续;if(typeof params[键] === '未定义')params[键] = [];params[key]。推送(key Val P的[对Num]。拆分('=')[1]);}}

如何致电:

  • params['key']; // 返回一个值数组(1… n)

输出:

  • key["value"]keyemptyvalue[""]keynovalue[未定义,"nowhasvalue"]

这个工作得很好。其他一些答案中的正则表达式引入了不必要的开销。

function getQuerystring(key) {var query = window.location.search.substring(1);var vars = query.split("&");for (var i = 0; i < vars.length; i++) {var pair = vars[i].split("=");if (pair[0] == key) {return pair[1];}}}

取自这里

以下函数返回queryString的对象版本。您可以简单地编写obj.key1obj.key2来访问参数中key1key2的值。

function getQueryStringObject(){var querystring = document.location.search.replace('?','').split( '&' );var objQueryString={};var key="",val="";if(typeof querystring == 'undefined'){return (typeof querystring);}for(i=0;i<querystring.length;i++){key=querystring[i].split("=")[0];val=querystring[i].split("=")[1];objQueryString[key] = val;}return objQueryString;}

要使用此功能,您可以编写

var obj= getQueryStringObject();alert(obj.key1);

我喜欢这一个(取自jquery-howto.blogspot.co.uk):

// get an array with all querystring values// example: var valor = getUrlVars()["valor"];function getUrlVars() {var vars = [], hash;var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');for (var i = 0; i < hashes.length; i++) {hash = hashes[i].split('=');vars.push(hash[0]);vars[hash[0]] = hash[1];}return vars;}

对我来说很棒。

参数名URLSearchParams

Firefox 44+、Opera 36+、Edge 17+、Safari10.3+和Chrome49+支持参数名URLSearchParams API:

对于IE的稳定版本,有一个谷歌建议的URLSearchParams

它没有被W3C标准化,但它是WhatWG的生活标准。

您可以在location上使用它:

const params = new URLSearchParams(location.search);

const params = (new URL(location)).searchParams;

或者在任何URL上:

const url = new URL('https://example.com?foo=1&bar=2');const params = new URLSearchParams(url.search);

您还可以使用URL对象上的速记.searchParams属性获取参数,如下所示:

const params = new URL('https://example.com?foo=1&bar=2').searchParams;params.get('foo'); // "1"params.get('bar'); // "2"

您可以通过get(KEY)set(KEY, VALUE)append(KEY, VALUE) API读取/设置参数。您还可以迭代所有值for (let p of params) {}

A参考实现和A样本页可用于审计和测试。

以下是获取类似于PHP$_GET数组的对象的快速方法:

function get_query(){var url = location.search;var qs = url.substring(url.indexOf('?') + 1).split('&');for(var i = 0, result = {}; i < qs.length; i++){qs[i] = qs[i].split('=');result[qs[i][0]] = decodeURIComponent(qs[i][1]);}return result;}

用法:

var $_GET = get_query();

对于查询字符串x=5&y&z=hello&x=6,它返回对象:

{x: "6",y: undefined,z: "hello"}

只需使用两个分裂

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

我正在阅读所有以前和更完整的答案。但我认为这是最简单和更快的方法。您可以查看此jsPerf基准

要解决Rup注释中的问题,请通过将第一行更改为以下两行来添加条件拆分。但绝对准确性意味着它现在比regexp慢(参见jsPerf)。

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的反例,这就赢了。否则,regexp。

如果您可以控制查询字符串并且可以保证您尝试获取的值永远不会包含任何编码的URL字符(在值中包含这些字符将是一个坏主意)-您可以使用以下第一个选项的简化和可读版本:

    function getQueryStringValueByName(name) {var queryStringFromStartOfValue = location.search.split(name + '=')[1];return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;

这些都是很好的答案,但我需要一些更强大的东西,我想你们可能都喜欢我创造的东西。

它是一个简单的库方法,可以解析和操作URL参数。静态方法具有以下子方法,可以在主题URL上调用:

  • getHost
  • getPath
  • getHash
  • setHash
  • 获取参数
  • getQuery
  • setParam
  • getParam
  • hasParam
  • 删除参数参数名

示例:

URLParser(url).getParam('myparam1')

var url = "http://www.example.com/folder/mypage.html?myparam1=1&myparam2=2#something";
function URLParser(u){var path="",query="",hash="",params;if(u.indexOf("#") > 0){hash = u.substr(u.indexOf("#") + 1);u = u.substr(0 , u.indexOf("#"));}if(u.indexOf("?") > 0){path = u.substr(0 , u.indexOf("?"));query = u.substr(u.indexOf("?") + 1);params= query.split('&');}elsepath = u;return {getHost: function(){var hostexp = /\/\/([\w.-]*)/;var match = hostexp.exec(path);if (match != null && match.length > 1)return match[1];return "";},getPath: function(){var pathexp = /\/\/[\w.-]*(?:\/([^?]*))/;var match = pathexp.exec(path);if (match != null && match.length > 1)return match[1];return "";},getHash: function(){return hash;},getParams: function(){return params},getQuery: function(){return query;},setHash: function(value){if(query.length > 0)query = "?" + query;if(value.length > 0)query = query + "#" + value;return path + query;},setParam: function(name, value){if(!params){params= new Array();}params.push(name + '=' + value);for (var i = 0; i < params.length; i++) {if(query.length > 0)query += "&";query += params[i];}if(query.length > 0)query = "?" + query;if(hash.length > 0)query = query + "#" + hash;return path + query;},getParam: function(name){if(params){for (var i = 0; i < params.length; i++) {var pair = params[i].split('=');if (decodeURIComponent(pair[0]) == name)return decodeURIComponent(pair[1]);}}console.log('Query variable %s not found', name);},hasParam: function(name){if(params){for (var i = 0; i < params.length; i++) {var pair = params[i].split('=');if (decodeURIComponent(pair[0]) == name)return true;}}console.log('Query variable %s not found', name);},removeParam: function(name){query = "";if(params){var newparams = new Array();for (var i = 0;i < params.length;i++) {var pair = params[i].split('=');if (decodeURIComponent(pair[0]) != name)newparams .push(params[i]);}params = newparams;for (var i = 0; i < params.length; i++) {if(query.length > 0)query += "&";query += params[i];}}if(query.length > 0)query = "?" + query;if(hash.length > 0)query = query + "#" + hash;return path + query;},}}
document.write("Host: " + URLParser(url).getHost() + '<br>');document.write("Path: " + URLParser(url).getPath() + '<br>');document.write("Query: " + URLParser(url).getQuery() + '<br>');document.write("Hash: " + URLParser(url).getHash() + '<br>');document.write("Params Array: " + URLParser(url).getParams() + '<br>');document.write("Param: " + URLParser(url).getParam('myparam1') + '<br>');document.write("Has Param: " + URLParser(url).hasParam('myparam1') + '<br>');
document.write(url + '<br>');
// Remove the first parameterurl = URLParser(url).removeParam('myparam1');document.write(url + ' - Remove the first parameter<br>');
// Add a third parameterurl = URLParser(url).setParam('myparam3',3);document.write(url + ' - Add a third parameter<br>');
// Remove the second parameterurl = URLParser(url).removeParam('myparam2');document.write(url + ' - Remove the second parameter<br>');
// Add a hashurl = URLParser(url).setHash('newhash');document.write(url + ' - Set Hash<br>');
// Remove the last parameterurl = URLParser(url).removeParam('myparam3');document.write(url + ' - Remove the last parameter<br>');
// Remove a parameter that doesn't existurl = URLParser(url).removeParam('myparam3');document.write(url + ' - Remove a parameter that doesn\"t exist<br>');

此函数将查询字符串转换为类似JSON的对象,它还处理无值和多值参数:

"use strict";function getQuerystringData(name) {var data = { };var parameters = window.location.search.substring(1).split("&");for (var i = 0, j = parameters.length; i < j; i++) {var parameter = parameters[i].split("=");var parameterName = decodeURIComponent(parameter[0]);var parameterValue = typeof parameter[1] === "undefined" ? parameter[1] : decodeURIComponent(parameter[1]);var dataType = typeof data[parameterName];if (dataType === "undefined") {data[parameterName] = parameterValue;} else if (dataType === "array") {data[parameterName].push(parameterValue);} else {data[parameterName] = [data[parameterName]];data[parameterName].push(parameterValue);}}return typeof name === "string" ? data[name] : data;}

我们在parameter[1]上执行undefined检查,因为如果变量为undefineddecodeURIComponent返回字符串“未定义”,这是错误的。

用法:

"use strict";var data = getQuerystringData();var parameterValue = getQuerystringData("parameterName");

有一个不错的小url实用程序,带有一些很酷的糖分:

http://www.example.com/path/index.html?silly=willy#chucky=cheese
url();            // http://www.example.com/path/index.html?silly=willy#chucky=cheeseurl('domain');    // example.comurl('1');         // pathurl('-1');        // index.htmlurl('?');         // silly=willyurl('?silly');    // willyurl('?poo');      // (an empty string)url('#');         // chucky=cheeseurl('#chucky');   // cheeseurl('#poo');      // (an empty string)

查看更多示例并在此处下载:https://github.com/websanova/js-url#url

获取查询的单行代码:

var value = location.search.match(new RegExp(key + "=(.*?)($|\&)", "i"))[1];

这是JavaScript从URL获取int ans String参数值的最简单和最小的函数

/* THIS FUNCTION IS TO FETCH INT PARAMETER VALUES */
function getParameterint(param) {var val = document.URL;var url = val.substr(val.indexOf(param))var n=parseInt(url.replace(param+"=",""));alert(n);}getParameteraint("page");getParameteraint("pagee");
/*THIS FUNCTION IS TO FETCH STRING PARAMETER*/function getParameterstr(param) {var val = document.URL;var url = val.substr(val.indexOf(param))var n=url.replace(param+"=","");alert(n);}getParameterstr("str");

源和演示:http://bloggerplugnplay.blogspot.in/2012/08/how-to-get-url-parameter-in-javascript.html

我使用这里列出的技术开发了一个小型库,以创建一个易于使用的,解决任何人麻烦的解决方案;它可以在这里找到:

https://github.com/Nijikokun/query-js

用法

获取特定参数/键:

query.get('param');

使用构建器获取整个对象:

var storage = query.build();console.log(storage.param);

还有更多…查看github链接以获取更多示例。

功能

  1. 对解码和参数进行缓存
  2. 支持哈希查询字符串#hello?page=3
  3. 支持传递自定义查询
  4. 支持数组/对象参数user[]="jim"&user[]="bob"
  5. 支持空管理&&
  6. 支持不带值的声明参数name&hello="world"
  7. 支持重复参数param=1&param=2
  8. 干净,紧凑,可读的源代码4kb
  9. AMD,需要,节点支持
function GetQueryStringParams(sParam){var sPageURL = window.location.search.substring(1);var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++){var sParameterName = sURLVariables[i].split('=');if (sParameterName[0] == sParam){return sParameterName[1];}}}​

这就是你如何使用这个函数,假设URL是

http://example.com/?stringtext=jquery&stringword=jquerybyexample

var tech = GetQueryStringParams('stringtext');var blog = GetQueryStringParams('stringword');

的mdn

function loadPageVar (sVar) {  return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));}
alert(loadPageVar("name"));

我需要查询字符串中的一个对象,我讨厌很多代码。它可能不是宇宙中最健壮的,但它只是几行代码。

var q = {};location.href.split('?')[1].split('&').forEach(function(i){q[i.split('=')[0]]=i.split('=')[1];});

this.htm?hello=world&foo=bar这样的URL将创建:

{hello:'world', foo:'bar'}

我相信这是实现这一目标的准确而简洁的方法(从http://css-tricks.com/snippets/javascript/get-url-variables/修改):

function getQueryVariable(variable) {
var query = window.location.search.substring(1),            // Remove the ? from the query string.vars = query.split("&");                                // Split all values by ampersand.
for (var i = 0; i < vars.length; i++) {                     // Loop through them...var pair = vars[i].split("=");                          // Split the name from the value.if (pair[0] == variable) {                              // Once the requested value is found...return ( pair[1] == undefined ) ? null : pair[1];   // Return null if there is no value (no equals sign), otherwise return the value.}}
return undefined;                                           // Wasn't found.
}

一个非常轻量级的jQuery方法:

var qs = window.location.search.replace('?','').split('&'),request = {};$.each(qs, function(i,v) {var initial, pair = v.split('=');if(initial = request[pair[0]]){if(!$.isArray(initial)) {request[pair[0]] = [initial]}request[pair[0]].push(pair[1]);} else {request[pair[0]] = pair[1];}return;});console.log(request);

为了提醒,例如?q

alert(request.q)

如果您想要数组样式参数URL.js支持任意嵌套的数组样式参数以及字符串索引(映射)。它还处理URL解码。

url.get("val[0]=zero&val[1]=one&val[2]&val[3]=&val[4]=four&val[5][0]=n1&val[5][1]=n2&val[5][2]=n3&key=val", {array:true});// Result{val: ['zero','one',true,'','four',[ 'n1', 'n2', 'n3' ]]key: 'val'}

该问题的顶部答案的问题是,它不支持放在#之后的参数,但有时也需要获取此值。

我修改了答案,让它也用哈希符号解析完整的查询字符串:

var getQueryStringData = function(name) {var result = null;var regexS = "[\\?&#]" + name + "=([^&#]*)";var regex = new RegExp(regexS);var results = regex.exec('?' + window.location.href.split('?')[1]);if (results != null) {result = decodeURIComponent(results[1].replace(/\+/g, " "));}return result;};

我在这里为我的需求做了一个小URL库:https://github.com/Mikhus/jsurl

这是在JavaScript中操作URL的一种更常见的方式。同时它非常轻量级(缩小和gzip压缩<1 KB),并且具有非常简单和干净的API。它不需要任何其他库即可工作。

关于第一个问题,做起来很简单:

var u = new Url; // Current document URL// orvar u = new Url('http://user:pass@example.com:8080/some/path?foo=bar&bar=baz#anchor');
// Looking for query string parametersalert( u.query.bar);alert( u.query.foo);
// Modifying query string parametersu.query.foo = 'bla';u.query.woo = ['hi', 'hey']
alert(u.query.foo);alert(u.query.woo);alert(u);

如果您使用的是浏览序列化,您可以使用Node.js中的url模块:

var url = require('url');
url.parse('http://example.com/?bob=123', true).query;
// returns { "bob": "123" }

更多阅读:URLNode.jsv0.12.2手册和文档

编辑:您可以使用url接口,它在几乎所有的新浏览器中都被广泛采用,如果代码要在旧浏览器上运行,您可以使用像这样的聚氨酯。这是一个关于如何使用URL接口获取查询参数(又名搜索参数)的代码示例

const url = new URL('http://example.com/?bob=123');url.searchParams.get('bob');

您也可以为此使用URLSearchParams,这里是MDN的一个例子来使用URLSearchParams:

var paramsString = "q=URLUtils.searchParams&topic=api";var searchParams = new URLSearchParams(paramsString);
//Iterate the search parameters.for (let p of searchParams) {console.log(p);}
searchParams.has("topic") === true; // truesearchParams.get("topic") === "api"; // truesearchParams.getAll("topic"); // ["api"]searchParams.get("foo") === null; // truesearchParams.append("topic", "webdev");searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"searchParams.set("topic", "More webdev");searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"searchParams.delete("topic");searchParams.toString(); // "q=URLUtils.searchParams"

如果您不想使用JavaScript库,您可以使用JavaScript字符串函数来解析window.location。将此代码保存在外部. js文件中,您可以在不同的项目中反复使用它。

// Example - window.location = "index.htm?name=bob";
var value = getParameterValue("name");
alert("name = " + value);
function getParameterValue(param){var url = window.location;var parts = url.split('?');var params = parts[1].split('&');var val = "";
for ( var i=0; i<params.length; i++){var paramNameVal = params[i].split('=');
if ( paramNameVal[0] == param ){val = paramNameVal[1];}}return val;}

查看此帖子或使用此:

<script type="text/javascript" language="javascript">$(document).ready(function(){var urlParams = {};(function (){var match,pl= /\+/g,  // Regular expression for replacing addition symbol with a spacesearch = /([^&=]+)=?([^&]*)/g,decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },query  = window.location.search.substring(1);
while (match = search.exec(query))urlParams[decode(match[1])] = decode(match[2]);})();
if (urlParams["q1"] === 1){return 1;}});</script>

我推荐Dar课程作为一个很好的插件。我已经使用它很长时间了。您也可以使用以下代码。只需将var queryObj = {};放在document.ready之前,并将波纹管代码放在document.ready.的开头,在此代码之后,您可以对任何查询对象使用queryObj["queryObjectName"]

var querystring = location.search.replace('?', '').split('&');for (var i = 0; i < querystring.length; i++) {var name = querystring[i].split('=')[0];var value = querystring[i].split('=')[1];queryObj[name] = value;}

用途:

  $(document).ready(function () {var urlParams = {};(function () {var match,pl = /\+/g, // Regex for replacing addition symbol with a spacesearch = /([^&=]+)=?([^&]*)/g,decode = function (s) {return decodeURIComponent(s.replace(pl, " "));},query = window.location.search.substring(1);
while (match = search.exec(query))urlParams[decode(match[1])] = decode(match[2]);})();if (urlParams["q1"] === 1) {return 1;}

请检查并让我知道你的意见。也请参考如何使用jQuery获取查询字符串值

Node.js源代码中有一个健壮的实现
https://github.com/joyent/node/blob/master/lib/querystring.js

TJ的qs也会解析嵌套参数
https://github.com/visionmedia/node-querystring

var getUrlParameters = function (name, url) {if (!name) {return undefined;}
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');url = url || location.search;
var regex = new RegExp('[\\?&#]' + name + '=?([^&#]*)', 'gi'), result, resultList = [];
while (result = regex.exec(url)) {resultList.push(decodeURIComponent(result[1].replace(/\+/g, ' ')));}
return resultList.length ? resultList.length === 1 ? resultList[0] : resultList : undefined;};

我使用这段代码(JavaScript)来获取通过URL传递的内容:

function getUrlVars() {var vars = {};var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {vars[key] = value;});return vars;}

然后要将值分配给变量,您只需指定要获取的参数,即URL为example.com/?I=1&p=2&f=3

您可以这样做来获取值:

var getI = getUrlVars()["I"];var getP = getUrlVars()["p"];var getF = getUrlVars()["f"];

那么这些值将是:

getI = 1, getP = 2 and getF = 3

检索URI查询值有很多解决方案,我更喜欢这个,因为它很短,效果很好:

function get(name){if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))return decodeURIComponent(name[1]);}

这是一个非常简单的获取参数值的方法(查询字符串)

使用gV(para_name)函数检索其值

var a=window.location.search;a=a.replace(a.charAt(0),""); //Removes '?'a=a.split("&");
function gV(x){for(i=0;i<a.length;i++){var b=a[i].substr(0,a[i].indexOf("="));if(x==b){return a[i].substr(a[i].indexOf("=")+1,a[i].length)}

我们刚刚发布了arg.js,一个旨在一劳永逸地解决这个问题的项目。传统上这是如此困难,但现在你可以这样做:

var name = Arg.get("name");

或获得全部:

var params = Arg.all();

如果你关心?query=true#hash=true之间的区别,那么你可以使用Arg.query()Arg.hash()方法。

如果你有Underscore.js豆沙,一个快速而肮脏的方法是:

_.object(window.location.search.slice(1).split('&').map(function (val) { return val.split('='); }));

tl; dr

一个快速的完整的解决方案,它处理多值键编码字符

// using ES5   (200 characters)var qd = {};if (location.search) location.search.substr(1).split("&").forEach(function(item) {var s = item.split("="), k = s[0], v = s[1] && decodeURIComponent(s[1]); (qd[k] = qd[k] || []).push(v)})
// using ES6   (23 characters cooler)var qd = {};if (location.search) location.search.substr(1).split`&`.forEach(item => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v)})
// as a function with reducefunction getQueryParams() {return location.search? location.search.substr(1).split`&`.reduce((qd, item) => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v); return qd}, {}): {}}

多线:

var qd = {};if (location.search) location.search.substr(1).split("&").forEach(function(item) {var s = item.split("="),k = s[0],v = s[1] && decodeURIComponent(s[1]); //  null-coalescing / short-circuit//(k in qd) ? qd[k].push(v) : qd[k] = [v](qd[k] = qd[k] || []).push(v) // null-coalescing / short-circuit})

这些代码是什么…
"零合并"短路评估
ES6破坏任务箭头函数模板字符串
####示例:

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


阅读更多…关于Vanilla JavaScript解决方案。

要访问URL的不同部分,请使用location.(search|hash)

最简单(虚拟)解决方案

var queryDict = {};location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
  • 正确处理空密钥
  • 用找到的最后值覆盖多键
"?a=1&b=0&c=3&d&e&a=5"> queryDicta: "5"b: "0"c: "3"d: undefinede: undefined

多值密钥

简单的按键检查(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]访问值
> qda: ["1", "5"]b: ["0"]c: ["3"]d: [undefined]e: [undefined]

编码字符?

使用decodeURIComponent()进行第二次或两者兼而有之拆分。

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=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"> qda: ["1", "5", "t e x t"]b: ["0"]c: ["3"]d: ["undefined"]  // decodeURIComponent(undefined) returns "undefined" !!!*e: ["undefined", "http://w3schools.com/my test.asp?name=ståle&car=saab"]


#来自评论**\*!!!**请注意,'decdeURIComponent(未定义的)'返回字符串'"未定义的"'。解决方案在于简单地使用 [`&&`][5],这确保了在未定义的值上不会调用'decdeURIComponent()'。_(参见顶部的“完整解决方案”。)_
v = v && decodeURIComponent(v);

如果querystring为空('location.search == ""`), 结果有点误导'qd == {"": 未定义}'。建议在启动解析函数之前检查querystring,例如:
if (location.search) location.search.substr(1).split("&").forEach(...)

可靠地做到这一点比人们最初想象的要复杂得多。

  1. 在其他答案中使用的location.search是脆弱的,应该避免-例如,如果有人搞砸并将#fragment标识符放在?query字符串之前,它会返回空。
  2. 在我看来,有很多方法可以在浏览器中自动转义URL,这使得decodeURIComponent几乎是强制性的。
  3. 许多查询字符串是从用户输入生成的,这意味着对URL内容的假设非常糟糕。包括非常基本的事情,例如每个键都是唯一的,甚至有一个值。

为了解决这个问题,这里有一个可配置的API,其健康剂量为防御性编程。请注意,如果你愿意硬编码一些变量,或者输入永远不能包含hasOwnProperty等,它可以减小一半。

版本1:返回一个数据对象,其中包含每个参数的名称和值。它有效地消除了它们的重复,并始终尊重从左到右找到的第一个。

function getQueryData(url, paramKey, pairKey, missingValue, decode) {
var query, queryStart, fragStart, pairKeyStart, i, len, name, value, result;
if (!url || typeof url !== 'string') {url = location.href; // more robust than location.search, which is flaky}if (!paramKey || typeof paramKey !== 'string') {paramKey = '&';}if (!pairKey || typeof pairKey !== 'string') {pairKey = '=';}// when you do not explicitly tell the API...if (arguments.length < 5) {// it will unescape parameter keys and values by default...decode = true;}
queryStart = url.indexOf('?');if (queryStart >= 0) {// grab everything after the very first ? question mark...query = url.substring(queryStart + 1);} else {// assume the input is already parameter data...query = url;}// remove fragment identifiers...fragStart = query.indexOf('#');if (fragStart >= 0) {// remove everything after the first # hash mark...query = query.substring(0, fragStart);}// make sure at this point we have enough material to do something useful...if (query.indexOf(paramKey) >= 0 || query.indexOf(pairKey) >= 0) {// we no longer need the whole query, so get the parameters...query = query.split(paramKey);result = {};// loop through the parameters...for (i = 0, len = query.length; i < len; i = i + 1) {pairKeyStart = query[i].indexOf(pairKey);if (pairKeyStart >= 0) {name = query[i].substring(0, pairKeyStart);} else {name = query[i];}// only continue for non-empty names that we have not seen before...if (name && !Object.prototype.hasOwnProperty.call(result, name)) {if (decode) {// unescape characters with special meaning like ? and #name = decodeURIComponent(name);}if (pairKeyStart >= 0) {value = query[i].substring(pairKeyStart + 1);if (value) {if (decode) {value = decodeURIComponent(value);}} else {value = missingValue;}} else {value = missingValue;}result[name] = value;}}return result;}}

版本2:返回一个数据映射对象,其中包含两个长度相同的数组,一个用于名称,一个用于值,每个参数都有一个索引。这个支持重复名称,并且故意不对它们进行去重复,因为这可能是您想要使用这种格式的原因。

function getQueryData(url, paramKey, pairKey, missingValue, decode) {
var query, queryStart, fragStart, pairKeyStart, i, len, name, value, result;
if (!url || typeof url !== 'string') {url = location.href; // more robust than location.search, which is flaky}if (!paramKey || typeof paramKey !== 'string') {paramKey = '&';}if (!pairKey || typeof pairKey !== 'string') {pairKey = '=';}// when you do not explicitly tell the API...if (arguments.length < 5) {// it will unescape parameter keys and values by default...decode = true;}
queryStart = url.indexOf('?');if (queryStart >= 0) {// grab everything after the very first ? question mark...query = url.substring(queryStart + 1);} else {// assume the input is already parameter data...query = url;}// remove fragment identifiers...fragStart = query.indexOf('#');if (fragStart >= 0) {// remove everything after the first # hash mark...query = query.substring(0, fragStart);}// make sure at this point we have enough material to do something useful...if (query.indexOf(paramKey) >= 0 || query.indexOf(pairKey) >= 0) {// we no longer need the whole query, so get the parameters...query = query.split(paramKey);result = {names: [],values: []};// loop through the parameters...for (i = 0, len = query.length; i < len; i = i + 1) {pairKeyStart = query[i].indexOf(pairKey);if (pairKeyStart >= 0) {name = query[i].substring(0, pairKeyStart);} else {name = query[i];}// only continue for non-empty names...if (name) {if (decode) {// unescape characters with special meaning like ? and #name = decodeURIComponent(name);}if (pairKeyStart >= 0) {value = query[i].substring(pairKeyStart + 1);if (value) {if (decode) {value = decodeURIComponent(value);}} else {value = missingValue;}} else {value = missingValue;}result.names.push(name);result.values.push(value);}}return result;}}

这将从URL字符串中解析变量数组。它既不使用regex也不使用任何外部库。

function url2json(url) {var obj={};function arr_vals(arr){if (arr.indexOf(',') > 1){var vals = arr.slice(1, -1).split(',');var arr = [];for (var i = 0; i < vals.length; i++)arr[i]=vals[i];return arr;}elsereturn arr.slice(1, -1);}function eval_var(avar){if (!avar[1])obj[avar[0]] = '';elseif (avar[1].indexOf('[') == 0)obj[avar[0]] = arr_vals(avar[1]);elseobj[avar[0]] = avar[1];}if (url.indexOf('?') > -1){var params = url.split('?')[1];if(params.indexOf('&') > 2){var vars = params.split('&');for (var i in vars)eval_var(vars[i].split('='));}elseeval_var(params.split('='));}return obj;}

示例:

var url = "http://www.x.com?luckyNums=[31,21,6]&name=John&favFoods=[pizza]&noVal"console.log(url2json(url));

输出:

[object]noVal: ""favFoods: "pizza"name:     "John"luckyNums:0: "31"1: "21"2: "6"

这将工作…您需要调用此函数,您需要通过传递其名称来获取参数…

function getParameterByName(name){name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");var regexS = "[\\?&]"+name+"=([^&#]*)";var regex = new RegExp( regexS );var results = regex.exec( window.location.href );alert(results[1]);if (results == null)return "";elsereturn results[1];}

获取所有查询字符串参数,包括复选框值(数组)。

考虑到GET参数的正确和正常使用,我看到它在大多数函数上缺少的东西是对数组的支持和删除哈希数据。

所以我写了这个函数:

function qs(a){if(!a)return {};a=a.split('#')[0].split('&');var b=a.length,c={},d,k,v;while(b--){d=a[b].split('=');k=d[0].replace('[]',''),v=decodeURIComponent(d[1]||'');c[k]?typeof c[k]==='string'?(c[k]=[v,c[k]]):(c[k].unshift(v)):c[k]=v;}return c}

使用速记运算符&while--循环,性能应该很好。

支持:

  1. 空值(key=/键
  2. 键值(key=value
  3. 数组(key[]=值
  4. 哈希(散列标签被拆分

备注:

它不支持对象数组(key[key]=value)

如果空格是+,它仍然是+。

如果需要,添加.replace(/\+/g, " ")

用法:

qs('array[]=1&array[]=2&key=value&empty=&empty2#hash')

返回:

{"empty": "","key": "value","array": ["1","2"]}

演示:

信息

如果你不明白什么或者你不能阅读这个函数,就问。我很乐意解释我在这里做了什么。

如果你认为这个函数不可读和不可维护,我很乐意为你重写这个函数,但要考虑到速记和按位运算符总是比标准语法快(也许在ECMA-262的书中阅读过速记和按位运算符,或者使用你最喜欢的搜索引擎)。以标准可读的语法重写代码意味着性能损失。

使用纯JavaScript和正则表达式的简单解决方案:

alert(getQueryString("p2"));
function getQueryString (Param) {return decodeURI("http://www.example.com/?p1=p11&p2=p2222".replace(new RegExp("^(?:.*[&?]" + encodeURI(Param).replace(/[.+*]/g, "$&") + "(?:=([^&]*))?)?.*$", "i"), "$1"));}

JsFiddle

这对我不起作用,我想匹配?b作为b参数存在,而不是匹配?return作为r参数,这里是我的解决方案

window.query_param = function(name) {var param_value, params;
params = location.search.replace(/^\?/, '');params = _.map(params.split('&'), function(s) {return s.split('=');});
param_value = _.select(params, function(s) {return s.first === name;})[0];
if (param_value) {return decodeURIComponent(param_value[1] || '');} else {return null;}};

就获取查询对象的大小而言,最短的可能表达式似乎是:

var params = {};location.search.substr(1).replace(/([^&=]*)=([^&]*)&?/g,function () { params[decodeURIComponent(arguments[1])] = decodeURIComponent(arguments[2]); });

您可以使用A元素将URI从字符串解析为其类似location的组件(例如,删除#...):

var a = document.createElement('a');a.href = url;// Parse a.search.substr(1)... as above

快速,简单,快速:

其功能:

function getUrlVar() {var result = {};var location = window.location.href.split('#');var parts = location[0].replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {result [key] = value;});return result;}

用法:

var varRequest = getUrlVar()["theUrlVarName"];

对于那些想要一个简短的方法(有限制)的人:

location.search.split('myParameter=')[1]

这是String原型实现:

String.prototype.getParam = function( str ){str = str.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");var regex = new RegExp( "[\\?&]*"+str+"=([^&#]*)" );var results = regex.exec( this );if( results == null ){return "";} else {return results[1];}}

示例调用:

var status = str.getParam("status")

str可以是查询字符串或url

这是Andy E链接的“Handle数组风格查询字符串”版本的扩展版本。修复了一个bug(?key=1&key[]=2&key[]=31丢失并替换为[2,3]),做了一些轻微的性能改进(重新解码值,重新计算“[”位置等)并添加了一些改进(功能化,支持?key=1&key=2,支持;分隔符)。我把变量留得很短,但添加了大量注释以使它们可读(哦,我在本地函数中重用了v,如果这让人困惑,对不起;)。

它将处理以下查询字符串…

? test=你好&人=需要&人[]=杰夫&人[]=吉姆&人[额外]=约翰&test3&noache=1398914891264

…把它变成一个看起来像…

{"test": "Hello","person": {"0": "neek","1": "jeff","2": "jim","length": 3,"extra": "john"},"test3": "","nocache": "1398914891264"}

正如你在上面看到的,这个版本处理了一些“畸形”数组的度量,即-person=neek&person[]=jeff&person[]=jimperson=neek&person=jeff&person=jim,因为键是可识别和有效的(至少在dotNet的名称值集合。添加中):

如果指定的键已经存在于目标NameValueCollection中实例,指定的值被添加到现有的逗号分隔值列表,格式为“value e1, value e2, value e3”。

在重复键上似乎是陪审团有点不确定,因为没有规范。在这种情况下,多个键被存储为一个(假)数组。但请注意,我不要将基于逗号的值处理为数组。

代码:

getQueryStringKey = function(key) {return getQueryStringAsObject()[key];};

getQueryStringAsObject = function() {var b, cv, e, k, ma, sk, v, r = {},d = function (v) { return decodeURIComponent(v).replace(/\+/g, " "); }, //# d(ecode) the v(alue)q = window.location.search.substring(1), //# suggested: q = decodeURIComponent(window.location.search.substring(1)),s = /([^&;=]+)=?([^&;]*)/g //# original regex that does not allow for ; as a delimiter:   /([^&=]+)=?([^&]*)/g;
//# ma(make array) out of the v(alue)ma = function(v) {//# If the passed v(alue) hasn't been setup as an objectif (typeof v != "object") {//# Grab the cv(current value) then setup the v(alue) as an objectcv = v;v = {};v.length = 0;
//# If there was a cv(current value), .push it into the new v(alue)'s array//#     NOTE: This may or may not be 100% logical to do... but it's better than loosing the original valueif (cv) { Array.prototype.push.call(v, cv); }}return v;};
//# While we still have key-value e(ntries) from the q(uerystring) via the s(earch regex)...while (e = s.exec(q)) { //# while((e = s.exec(q)) !== null) {//# Collect the open b(racket) location (if any) then set the d(ecoded) v(alue) from the above split key-value e(ntry)b = e[1].indexOf("[");v = d(e[2]);
//# As long as this is NOT a hash[]-style key-value e(ntry)if (b < 0) { //# b == "-1"//# d(ecode) the simple k(ey)k = d(e[1]);
//# If the k(ey) already existsif (r[k]) {//# ma(make array) out of the k(ey) then .push the v(alue) into the k(ey)'s array in the r(eturn value)r[k] = ma(r[k]);Array.prototype.push.call(r[k], v);}//# Else this is a new k(ey), so just add the k(ey)/v(alue) into the r(eturn value)else {r[k] = v;}}//# Else we've got ourselves a hash[]-style key-value e(ntry)else {//# Collect the d(ecoded) k(ey) and the d(ecoded) sk(sub-key) based on the b(racket) locationsk = d(e[1].slice(0, b));sk = d(e[1].slice(b + 1, e[1].indexOf("]", b)));
//# ma(make array) out of the k(ey)r[k] = ma(r[k]);
//# If we have a sk(sub-key), plug the v(alue) into itif (sk) { r[k][sk] = v; }//# Else .push the v(alue) into the k(ey)'s arrayelse { Array.prototype.push.call(r[k], v); }}}
//# Return the r(eturn value)return r;};

这是我正在使用的:

/*** Examples:* getUrlParams()['myparam']    // url defaults to the current page* getUrlParams(url)['myparam'] // url can be just a query string** Results of calling `getUrlParams(url)['myparam']` with various urls:* example.com                               (undefined)* example.com?                              (undefined)* example.com?myparam                       (empty string)* example.com?myparam=                      (empty string)* example.com?myparam=0                     (the string '0')* example.com?myparam=0&myparam=override    (the string 'override')** Origin: http://stackoverflow.com/a/23946023/2407309*/function getUrlParams (url) {var urlParams = {} // return valuevar queryString = getQueryString()if (queryString) {var keyValuePairs = queryString.split('&')for (var i = 0; i < keyValuePairs.length; i++) {var keyValuePair = keyValuePairs[i].split('=')var paramName = keyValuePair[0]var paramValue = keyValuePair[1] || ''urlParams[paramName] = decodeURIComponent(paramValue.replace(/\+/g, ' '))}}return urlParams // functions belowfunction getQueryString () {var reducedUrl = url || window.location.searchreducedUrl = reducedUrl.split('#')[0] // Discard fragment identifier.var queryString = reducedUrl.split('?')[1]if (!queryString) {if (reducedUrl.search('=') !== false) { // URL is a query string.queryString = reducedUrl}}return queryString} // getQueryString} // getUrlParams

在最后一种情况下返回“覆盖”而不是“0”使其与PHP一致。适用于IE7。

最基本但最基本的:

data = {};$.each(location.search.substr(1).split('&').filter(Boolean).map(function(kvpairs){return kvpairs.split('=')}),function(i,values) {data[values.shift()] = values.join('=')});

它不处理值列表,例如?a[]=1&a[]2

// Parse query stringvar params = {}, queryString = location.hash.substring(1),regex = /([^&=]+)=([^&]*)/g,m;while (m = regex.exec(queryString)) {params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);}

此函数将根据需要使用递归返回一个解析的JavaScript对象,其中包含任何任意嵌套值。

这是一个jsfiddle的例子。

['?a=a','&b=a','&b=b','&c[]=a','&c[]=b','&d[a]=a','&d[a]=x','&e[a][]=a','&e[a][]=b','&f[a][b]=a','&f[a][b]=x','&g[a][b][]=a','&g[a][b][]=b','&h=%2B+%25','&i[aa=b','&i[]=b','&j=','&k','&=l','&abc=foo','&def=%5Basf%5D','&ghi=[j%3Dkl]','&xy%3Dz=5','&foo=b%3Dar','&xy%5Bz=5'].join('');

给定上述任何测试示例。

var qs = function(a) {var b, c, e;b = {};c = function(d) {return d && decodeURIComponent(d.replace(/\+/g, " "));};e = function(f, g, h) {var i, j, k, l;h = h ? h : null;i = /(.+?)\[(.+?)?\](.+)?/g.exec(g);if (i) {[j, k, l] = [i[1], i[2], i[3]]if (k === void 0) {if (f[j] === void 0) {f[j] = [];}f[j].push(h);} else {if (typeof f[j] !== "object") {f[j] = {};}if (l) {e(f[j], k + l, h);} else {e(f[j], k, h);}}} else {if (f.hasOwnProperty(g)) {if (Array.isArray(f[g])) {f[g].push(h);} else {f[g] = [].concat.apply([f[g]], [h]);}} else {f[g] = h;}return f[g];}};a.replace(/^(\?|#)/, "").replace(/([^#&=?]+)?=?([^&=]+)?/g, function(m, n, o) {n && e(b, c(n), c(o));});return b;};