Answers:
更新:2018年9月
您可以使用简单且具有不错(但不完整)浏览器支持的URLSearchParams。
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
原版的
为此,您不需要jQuery。您可以只使用一些纯JavaScript:
function getParameterByName(name, url) {
if (!url) 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=&baz
var 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查询键的权威位置。
注意:该功能区分大小写。如果您希望使用不区分大小写的参数名称,请在RegExp中添加'i'修饰符
这是基于新的URLSearchParams规范的更新,目的是更简洁地达到相同的结果。请参阅下面标题为“ URLSearchParams ”的答案。
http://www.mysite.com/index.php?x=x1&x=x2&x=x3
字段的值x
不明确。
?mykey=0&m.+key=1
,调用getParameterByName("m.+key")
将返回0
而不是1
。name
在构建正则表达式之前,您需要转义正则表达式元字符。您只需要.replace()
使用全局标志并将其"\\$&"
用作替换表达式即可调用一次。您应该搜索location.search
而不是location.href
。答案超过400的应解释这些细节。
此处发布的某些解决方案效率低下。完全不需要每次脚本需要访问参数时都重复进行正则表达式搜索,只需一个函数即可将参数拆分为一个关联数组样式的对象。如果您不使用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]);
})();
示例查询字符串:
?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
这也可以很容易地改进以处理数组样式的查询字符串。这方面的一个例子是在这里,但由于阵列式的参数没有定义RFC 3986我不会污染这个答案的源代码。对于那些对“污染”版本感兴趣的人,请查看下面的Campbeln的答案。
另外,正如评论中指出的那样,它;
是key=value
成对的合法分隔符。这将需要更复杂的正则表达式来处理;
或&
,我认为这是不必要的,因为很少;
使用正则表达式,而且我说这两种情况都不太可能使用。如果您需要支持;
而不是&
,只需在正则表达式中交换它们即可。
<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>
简单得多!
一种新功能将是检索重复的参数,如下所示
myparam=1&myparam=2
。没有规范,但是,大多数当前方法遵循数组的生成。
myparam = ["1", "2"]
因此,这是管理它的方法:
let urlParams = {};
(window.onpopstate = function () {
let 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);
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]);
}
}
})();
window.location.hash
属性中,该属性与属性分开window.location.search
。如果哈希值发生变化,则完全不会影响查询字符串。
?a=b&c=d
是常规的,并且是Web表单的W3C建议,但URI规范仅定义了query = *( pchar / "/" / "?" )
。
while(match = search.exec(query))
while((match = search.exec(query)) !== null)
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;
}, {}
)
: {}
};
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('&'));
使用类似的URL ?topic=123&name=query+string
,将返回以下内容:
qs["topic"]; // 123
qs["name"]; // query string
qs["nothere"]; // undefined (object)
撕毁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¶m2=val"
//Update the url/querystring in the browser's location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));
准备代码:方法声明
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中进行测试
unescape
是一个已弃用的函数,并被替换为decodeURIComponent()
,请注意,这些函数都不能正确将a解码+
为空格字符。2.您应该将结果声明为一个对象,而不是一个数组,因为JavaScript本身没有关联数组,并且通过向其声明命名的属性仍然可以将您声明的数组视为对象。
window.location
,考虑到客户端导航到该URL的成本要高得多,因此使用它来从中提取URL参数不会引起任何性能问题。
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/
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
。
null
如果参数后面没有'=' ,则返回该参数。你可以预先准备if (!RegExp('[?&]'+name+'(&.*)?$').exec(window.location.search)) return false;
,使其返回boolean false
如果在所有参数心不是在那里。
new
创建正则表达式时将使用前缀:var match = new RegExp('...
.replace('\u200E', '')
var results = new RegExp('[\\?&]' + name + '=([^&#/]*)').exec(url);
火狐44+,歌剧36+,边缘17+,Safari浏览器10.3+和Chrome 49+支持URLSearchParams API:
对于IE的稳定版本,有一个Google建议的URLSearchParams polyfill。
您可以在location
以下位置使用它:
let params = new URLSearchParams(location.search);
要么
let params = (new URL(location)).searchParams;
或当然在任何URL上:
let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search);
您还可以使用.searchParams
URL对象的简写属性来获取参数,如下所示:
let 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) {}
。
.get
.
slice(1)
打开.search
,您可以直接使用它。URLSearchParams可以处理前导?
。
URLSearchParams
这是不好的,因为它不返回URL参数的实际值。
new URL('https://example.com?foo=1&bar=2')
不适用于android网址file:///android_asset/...
只是另一个建议。插件Purl允许检索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'
然而,随着2014年11月11日的,金银丝是不再保持,笔者建议使用URI.js代替。jQuery插件的不同之处在于它侧重于元素-用于字符串,可以URI
直接使用,无论是否使用jQuery。类似的代码看起来像这样,更完整的文档在这里:
var url = new URI('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.protocol(); // returns 'http'
url.path(); // returns '/folder/dir/index.html'
一种快速,完整的解决方案,可以处理多值键和编码字符。
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)})
多行:
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
})
这些代码是什么...
“ null-coalescing”,短路评估
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"
> qd
a: ["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"
要访问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"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: 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]
> qd
a: ["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"
> qd
a: ["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"]
* !!! 请注意,它decodeURIComponent(undefined)
返回string "undefined"
。解决方案在于的简单用法&&
,以确保decodeURIComponent()
不会在未定义的值上调用。(请参见顶部的“完整解决方案”。)
v = v && decodeURIComponent(v);
如果querystring为空(location.search == ""
),则结果会产生误导qd == {"": undefined}
。建议像下面这样启动解析功能之前检查查询字符串:
if (location.search) location.search.substr(1).split("&").forEach(...)
array.forEach()
通过在脚本开始处注入某些代码来教您的javascript处理器。看到填充工具developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
var qd = {}; location.search.substr(1).split("&").forEach( function(item) { var s = item.split("="), k = s[0], v; if(s.length>1) v = decodeURIComponent(s[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v] })
snipplr.com上的Roshambo有一个简单的脚本来实现此目的,如使用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.com/index.html?lang=de
。
只需致电var langval = $.urlParam('lang');
,您就知道了。
UZBEKJON对此也有很棒的博客文章,使用jQuery获取URL参数和值。
0
?当然,我可以使用严格的相等性检查,但不是null
吗?
如果您使用的是jQuery,则可以使用一个库,例如jQuery BBQ:Back Button&Query Library。
... 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 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可以更改,这将使参数及其值的缓存无效。
每次更改历史记录时,此版本都会更新其内部参数缓存。
只需使用两个拆分:
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的反案,那就赢了。否则,使用正则表达式。
或者,如果您可以控制查询字符串,并且可以保证您尝试获取的值永远不会包含任何URL编码的字符(将它们包含在值中将是一个坏主意)-您可以使用以下稍微简化和易读的版本第一种选择:
function getQueryStringValueByName(name) { var queryStringFromStartOfValue = location.search.split(name + '=')[1]; return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;
get('value')
on),则此方法将无效http://the-url?oldvalue=1&value=2
。
half
真实性,则对于空参数(如)返回null ?param=
。在这种情况下,它应该返回空字符串,检查half !== undefined
可以解决。
function get(param){return decodeURIComponent((location.search.split(param+'=')[1]||'').split('&')[0])}
return half !== undefined ? decodeURIComponent(half[1].split('&')[0]) : null;
为了使它正常工作,我不得不更改第二行
这是我将Andy E的出色解决方案制作成完整的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');
两全其美!
如果您要进行的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
)
我喜欢 Ryan Phelan的解决方案。但是我没有看到为此扩展jQuery的任何意义?没有使用jQuery功能。
另一方面,我喜欢Google Chrome中的内置功能:window.location.getParameter。
那么为什么不使用它呢?好的,其他浏览器没有。因此,如果此函数不存在,请创建它:
if (!window.location.getParameter ) {
window.location.getParameter = function(key) {
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[key];
};
}
此功能或多或少与Ryan Phelan相同,但其包装方式有所不同:名称清晰且不依赖其他javascript库。有关此功能的更多信息,请访问我的博客。
这是获取类似于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($) { $.extend({ get_query: function (name) { var url = location.href; 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]] = qs[i][1]; } return result; } }); })(jQuery);
并使用如下代码:$.get_query()
location.href
将必须替换为location.search
。
用普通的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');
window.location.search
!
这些都是很好的答案,但是我需要更强大的功能,并认为大家可能都想拥有我创造的东西。
这是一种简单的库方法,可以剖析和处理URL参数。静态方法具有以下可以在主题URL上调用的子方法:
例:
URLParser(url).getParam('myparam1')
var url = "http://www.test.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('&');
}else
path = 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 parameter
url = URLParser(url).removeParam('myparam1');
document.write(url + ' - Remove the first parameter<br>');
// Add a third parameter
url = URLParser(url).setParam('myparam3',3);
document.write(url + ' - Add a third parameter<br>');
// Remove the second parameter
url = URLParser(url).removeParam('myparam2');
document.write(url + ' - Remove the second parameter<br>');
// Add a hash
url = URLParser(url).setHash('newhash');
document.write(url + ' - Set Hash<br>');
// Remove the last parameter
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove the last parameter<br>');
// Remove a parameter that doesn't exist
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove a parameter that doesn\"t exist<br>');
高尔夫代码:
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:can
1:cheezburger
i:can
has:cheezburger
我经常使用正则表达式,但并非如此。
对于我来说,在应用程序中读取一次查询字符串,然后从所有键/值对构建对象似乎更容易,更高效,例如:
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;
}();
对于类似的URL,http://domain.com?param1=val1¶m2=val2
您可以稍后在代码中使用search.param1
和获得它们的值search.param2
。
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=b
returns:
data[0] // 3
data[1] // jet
data[2] // b
or
alert(GET("id")[0]) // return 3
Roshambo jQuery方法未处理解码URL
http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/
刚刚在添加return语句时也添加了该功能
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;
}
我喜欢这个(取自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;
}
对我来说很棒。
这是我对这个出色答案的编辑-增强了使用没有值的键解析查询字符串的功能。
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。
那么到底发生了什么变化?使用url的http://sb.com/reg/step1?param=
结果将相同。但是使用url时,http://sb.com/reg/step1?param
Bruno的解决方案返回一个没有键的对象,而我的返回一个带有键param
和undefined
值的对象。
我需要查询字符串中的对象,并且我讨厌很多代码。它可能不是Universe中最强大的,但是只有几行代码。
var q = {};
location.href.split('?')[1].split('&').forEach(function(i){
q[i.split('=')[0]]=i.split('=')[1];
});
像这样的URL this.htm?hello=world&foo=bar
将创建:
{hello:'world', foo:'bar'}
decodeURIComponent
存储它的值-可以说是密钥,但是在其中使用奇数字符串的可能性较小。
?a&b&c
但它确实非常易读(顺便说一句类似于我的第一个想法)。也是split
多余的,但是我要比将10个字符串分割两次更能提高性能。
location.search.substr(1)
而不是location.href.split('?')[1]
避免#anchor
与最后一个查询参数一起使用hash()。
location.search
!
这是Andy E链接的“处理数组样式的查询字符串”-版本的扩展版本。修复了一个错误(?key=1&key[]=2&key[]=3
; 1
丢失并替换为[2,3]
),对性能做了一些小的改进(重新解码值,重新计算“ [”位置等),并增加了一些改进(功能化,支持?key=1&key=2
,支持;
定界符) 。我烦人地将变量简短地留了下来,但是添加了大量的注释以使它们易于阅读(哦,我v
在局部函数中重用了,抱歉,否则;)。
它将处理以下查询字符串...
?test = Hello&person = neek&person [] = jeff&person [] = jim&person [extra] = john&test3&nocache = 1398914891264
...使其成为看起来像...的对象
{
"test": "Hello",
"person": {
"0": "neek",
"1": "jeff",
"2": "jim",
"length": 3,
"extra": "john"
},
"test3": "",
"nocache": "1398914891264"
}
如您在上面看到的,此版本处理“格式错误”数组的某种度量,即- person=neek&person[]=jeff&person[]=jim
或person=neek&person=jeff&person=jim
因为键是可识别且有效的(至少在dotNet的NameValueCollection.Add中):
如果指定的键已经存在于目标NameValueCollection实例中,则将指定的值以“ value1,value2,value3”的形式添加到现有的逗号分隔值列表中。
由于没有规范,似乎陪审团似乎对重复的按键有些犹豫。在这种情况下,多个密钥存储为(伪)数组。但是请注意,我不会将基于逗号的值处理为数组。
编码:
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 object
if (typeof v != "object") {
//# Grab the cv(current value) then setup the v(alue) as an object
cv = 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 value
if (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 exists
if (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) locations
k = 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 it
if (sk) { r[k][sk] = v; }
//# Else .push the v(alue) into the k(ey)'s array
else { Array.prototype.push.call(r[k], v); }
}
}
//# Return the r(eturn value)
return r;
};
q = decodeURIComponent(window.location.search.substring(1)),
帮助也可以做到这一点。
这是我不久前创建的函数,对此我感到非常满意。它不区分大小写-很方便。另外,如果所请求的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);
}
该问题的最高答案的问题是,它不支持在#后面放置参数,但有时也需要获取该值。
我修改了答案,使其也可以使用哈希符号解析完整的查询字符串:
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;
};
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];
}
}
}
假设网址为
http://dummy.com/?stringtext=jquery&stringword=jquerybyexample
var tech = GetQueryStringParams('stringtext');
var blog = GetQueryStringParams('stringword');
?stringtext&stringword=foo
。
如果您使用的是Browserify,则可以使用Node.js中的url
模块:
var url = require('url');
url.parse('http://example.com/?bob=123', true).query;
// returns { "bob": "123" }
进一步阅读:URL Node.js v0.12.2手册和文档
编辑:您可以使用URL界面,它几乎在所有新浏览器中被广泛采用,如果代码要在旧的浏览器上运行,则可以使用这种polyfill。这是一个有关如何使用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; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.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"
url
模块的API 文档位于:nodejs.org/api/url.html