在JavaScript中parsing查询string
可能重复:
我怎样才能得到查询string值?
我需要parsing查询stringwww.mysite.com/default.aspx?dest=aboutus.aspx
。 如何在JavaScript中获得dest
variables?
下面是一个在JavaScript中parsing查询string的快捷方法:
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'));
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; }
将查询string转换为对象{hello: 1, another: 2}
如hello=1&another=2
。 从那里,很容易提取你需要的variables。
也就是说,它不处理诸如"hello=1&hello=2&hello=3"
数组情况。 为了处理这个问题,你必须在添加对象之前检查你所创build的对象的属性是否存在,然后把它的值转换成一个数组,并推送其他位。
您也可以使用Rodney Rehm出色的URI.js库。 就是这样:-
var qs = URI('www.mysite.com/default.aspx?dest=aboutus.aspx').query(true); // == { dest : 'aboutus.aspx' } alert(qs.dest); // == aboutus.aspx
并parsing当前页面的查询string: –
var $_GET = URI(document.URL).query(true); // ala PHP alert($_GET['dest']); // == aboutus.aspx
我也是! http://jsfiddle.net/drzaus/8EE8k/
(注意:没有花哨的嵌套或重复的检查)
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
并testing:
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 -------------------
这里是我的版本基于宽松Braceyard的版本上面,但parsing成一个“字典”和支持search参数没有“=”。 在我的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);
接下来从我的评论发布到@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; }
这段代码需要提供查询string(如'str')并返回一个对象。 string在所有的&中被分割,产生一个数组。 该数组然后被travsersed和它的每个项目被分割“=”。 这导致了子数组,其中第0个元素是参数,第1个元素是数值(如果no = sign,则为undefined)。 这些映射到对象属性,所以例如string“hello = 1&another = 2&something”变成:
{ hello: "1", another: "2", something: undefined }
另外,这段代码还注意到重复的重复例如“hello = 1&hello = 2”,并把结果转换成一个数组,例如:
{ hello: ["1", "2"] }
您还会注意到它处理的是不使用=号的情况。 它也会忽略符号后面是否有一个等号。
原来的问题有点矫枉过正,但是如果你需要在javascript中使用querystrings,可以使用一个可重用的解决scheme:)
以下函数将使用正则expression式parsingsearchstring,caching结果并返回所请求variables的值:
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
。 我还没有完全testing这个,正则expression式可能仍然需要一些调整…
如果你知道你只有一个查询stringvariables,你可以简单地做:
var dest = location.search.replace(/^.*?\=/, '');
这个怎么样?
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'));
干杯
我想要一个简单的函数,它将URL作为input并返回查询参数的映射。 如果我要改进这个function,我会支持URL中数组数据的标准,或嵌套variables。
这应该回来了,用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; };
我想在页面的DOM元素中select特定的链接,将这些用户发送到计时器上的redirect页面,然后将它们传递到原始点击的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()">
redirect页面 头
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)">
看看这个解决scheme 。 使用他的函数,你只需要调用gup('dest')
来获取URL dest
参数。