我需要解析查询字符串www.mysite.com/default.aspx?dest=aboutus.aspx
。
如何在JavaScript中获取dest
变量?
答案 0 :(得分:312)
以下是在JavaScript中解析查询字符串的快速简便方法:
function getQueryVariable(variable) {
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 (decodeURIComponent(pair[0]) == variable) {
return decodeURIComponent(pair[1]);
}
}
console.log('Query variable %s not found', variable);
}
现在请求 page.html?x = Hello :
console.log(getQueryVariable('x'));
答案 1 :(得分:138)
function parseQuery(queryString) {
var query = {};
var pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&');
for (var i = 0; i < pairs.length; i++) {
var pair = pairs[i].split('=');
query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
}
return query;
}
将hello=1&another=2
之类的查询字符串转换为对象{hello: 1, another: 2}
。从那里,很容易提取您需要的变量。
也就是说,它不处理"hello=1&hello=2&hello=3"
等数组个案。要使用它,您必须在添加之前检查您所创建的对象的属性是否存在,并将其值转换为数组,并推送任何其他位。
答案 2 :(得分:54)
您还可以URI.js使用优秀的Rodney Rehm库。方法如下: -
var qs = URI('www.mysite.com/default.aspx?dest=aboutus.aspx').query(true); // == { dest : 'aboutus.aspx' }
alert(qs.dest); // == aboutus.aspx
并解析当前页面的查询字符串: -
var $_GET = URI(document.URL).query(true); // ala PHP
alert($_GET['dest']); // == aboutus.aspx
答案 3 :(得分:21)
(注意:没有花哨的嵌套或重复检查)
deparam = function (querystring) {
// remove any preceding url and split
querystring = querystring.substring(querystring.indexOf('?')+1).split('&');
var params = {}, pair, d = decodeURIComponent;
// march and parse
for (var i = querystring.length - 1; i >= 0; i--) {
pair = querystring[i].split('=');
params[d(pair[0])] = d(pair[1] || '');
}
return params;
};//-- fn deparam
测试:
var tests = {};
tests["simple params"] = "ID=2&first=1&second=b";
tests["full url"] = "http://blah.com/?" + tests["simple params"];
tests['just ?'] = '?' + tests['simple params'];
var $output = document.getElementById('output');
function output(msg) {
$output.innerHTML += "\n" + Array.prototype.slice.call(arguments, 0).join("\n");
}
$.each(tests, function(msg, test) {
var q = deparam(test);
// prompt, querystring, result, reverse
output(msg, test, JSON.stringify(q), $.param(q));
output('-------------------');
});
结果:
simple params
ID=2&first=1&second=b
{"second":"b","first":"1","ID":"2"}
second=b&first=1&ID=2
-------------------
full url
http://blah.com/?ID=2&first=1&second=b
{"second":"b","first":"1","ID":"2"}
second=b&first=1&ID=2
-------------------
just ?
?ID=2&first=1&second=b
{"second":"b","first":"1","ID":"2"}
second=b&first=1&ID=2
-------------------
答案 4 :(得分:19)
这是我的版本基于Braceyard上面的版本,但解析为'字典'并支持没有'='的搜索参数。在我的JQuery $(document).ready()函数中使用它。参数存储为argsParsed中的键/值对,您可能希望在某处保存...
'use strict';
function parseQuery(search) {
var args = search.substring(1).split('&');
var argsParsed = {};
var i, arg, kvp, key, value;
for (i=0; i < args.length; i++) {
arg = args[i];
if (-1 === arg.indexOf('=')) {
argsParsed[decodeURIComponent(arg).trim()] = true;
}
else {
kvp = arg.split('=');
key = decodeURIComponent(kvp[0]).trim();
value = decodeURIComponent(kvp[1]).trim();
argsParsed[key] = value;
}
}
return argsParsed;
}
parseQuery(document.location.search);
答案 5 :(得分:15)
从我对@bobby发表的答案的评论开始,以下是我将使用的代码:
function parseQuery(str)
{
if(typeof str != "string" || str.length == 0) return {};
var s = str.split("&");
var s_length = s.length;
var bit, query = {}, first, second;
for(var i = 0; i < s_length; i++)
{
bit = s[i].split("=");
first = decodeURIComponent(bit[0]);
if(first.length == 0) continue;
second = decodeURIComponent(bit[1]);
if(typeof query[first] == "undefined") query[first] = second;
else if(query[first] instanceof Array) query[first].push(second);
else query[first] = [query[first], second];
}
return query;
}
此代码接受提供的查询字符串(作为'str')并返回一个对象。字符串在&amp;的所有出现时被分割,从而产生一个数组。然后对该数组进行travsers,并将其中的每个项目拆分为“=”。这导致子数组,其中第0个元素是参数,第1个元素是值(如果没有=符号,则为undefined)。这些映射到对象属性,因此例如字符串“hello = 1&amp; another = 2&amp; something”变为:
{
hello: "1",
another: "2",
something: undefined
}
此外,此代码注意到重复重复,例如“hello = 1&amp; hello = 2”并将结果转换为数组,例如:
{
hello: ["1", "2"]
}
您还会注意到它会处理未使用=符号的情况。如果在&amp; amp;之后有一个等号,它也会忽略它。符号
对于原始问题有点矫枉过正,但如果您需要在javascript中使用查询字符串,则可以使用可重用的解决方案:)
答案 6 :(得分:8)
如果您知道只有一个查询字符串变量,那么您可以这样做:
var dest = location.search.replace(/^.*?\=/, '');
答案 7 :(得分:7)
以下函数将使用正则表达式解析搜索字符串,缓存结果并返回所请求变量的值:
window.getSearch = function(variable) {
var parsedSearch;
parsedSearch = window.parsedSearch || (function() {
var match, re, ret;
re = /\??(.*?)=([^\&]*)&?/gi;
ret = {};
while (match = re.exec(document.location.search)) {
ret[match[1]] = match[2];
}
return window.parsedSearch = ret;
})();
return parsedSearch[variable];
};
您可以在没有任何参数的情况下调用一次并使用window.parsedSearch
对象,或随后调用getSearch
。
我还没有完全测试过这个,正则表达式可能还需要一些调整......
答案 8 :(得分:5)
我想要一个简单的函数,它将URL作为输入并返回查询参数的映射。 如果我要改进这个功能,我会支持URL和/或嵌套变量中的数组数据标准。
这应该可以使用jQuery.param(qparams)函数。
function getQueryParams(url){
var qparams = {},
parts = (url||'').split('?'),
qparts, qpart,
i=0;
if(parts.length <= 1 ){
return qparams;
}else{
qparts = parts[1].split('&');
for(i in qparts){
qpart = qparts[i].split('=');
qparams[decodeURIComponent(qpart[0])] =
decodeURIComponent(qpart[1] || '');
}
}
return qparams;
};
答案 9 :(得分:2)
这个怎么样?
function getQueryVar(varName){
// Grab and unescape the query string - appending an '&' keeps the RegExp simple
// for the sake of this example.
var queryStr = unescape(window.location.search) + '&';
// Dynamic replacement RegExp
var regex = new RegExp('.*?[&\\?]' + varName + '=(.*?)&.*');
// Apply RegExp to the query string
val = queryStr.replace(regex, "$1");
// If the string is the same, we didn't find a match - return false
return val == queryStr ? false : val;
}
..然后只需用:
调用它alert('Var "dest" = ' + getQueryVar('dest'));
干杯
答案 10 :(得分:2)
我想在页面上的DOM元素中选择特定链接,将这些用户发送到计时器上的重定向页面,然后将其传递到原始点击URL。这就是我使用常规javascript结合上述方法之一的方法。
包含链接的页面 主管
function replaceLinks() {
var content = document.getElementById('mainContent');
var nodes = content.getElementsByTagName('a');
for (var i = 0; i < document.getElementsByTagName('a').length; i++) {
{
href = nodes[i].href;
if (href.indexOf("thisurl.com") != -1) {
nodes[i].href="http://www.thisurl.com/redirect.aspx" + "?url=" + nodes[i];
nodes[i].target="_blank";
}
}
}
}
<强>车身强>
<body onload="replaceLinks()">
重定向页面 头
function getQueryVariable(variable) {
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 (decodeURIComponent(pair[0]) == variable) {
return decodeURIComponent(pair[1]);
}
}
console.log('Query variable %s not found', variable);
}
function delayer(){
window.location = getQueryVariable('url')
}
体
<body onload="setTimeout('delayer()', 1000)">
答案 11 :(得分:-1)
看看this solution。使用他的功能,您只需拨打gup('dest')
即可获取网址dest
参数。