如何在Javascript中解析URL查询参数？


How do I parse a URL query parameters, in Javascript?

本问题已经有最佳答案，请猛点这里访问。

Possible Duplicate:
Use the get paramater of the url in javascript
How can I get query string values in JavaScript?

在Javascript中，如何获取URL字符串的参数(而不是当前的URL)？

喜欢：

1
www.domain.com/?v=123&p=hello

我可以在JSON对象中获得"v"和"p"吗？

相关讨论

今天(这个答案后2。5年)你可以安全地使用Array.forEach。正如@ricosrealm建议的那样，decodeURIComponent用于此功能。

1
2
3
4
5
6
7
8
9
10
function getJsonFromUrl(url) {
  if(!url) url = location.search;
  var query = url.substr(1);
  var result = {};
  query.split("&").forEach(function(part) {
    var item = part.split("=");
    result[item[0]] = decodeURIComponent(item[1]);
  });
  return result;
}

实际上并不是那么简单，请参阅评论中的同行评审，尤其是：

  • 基于散列的路由(@cmfolio)
  • 数组参数(@ user2368055)
  • 正确使用decodeURIComponent(@AndrewF)

也许这应该去codereview SE，但这里是更安全和无regexp的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function getJsonFromUrl(url) {
  if(!url) url = location.href;
  var question = url.indexOf("?");
  var hash = url.indexOf("#");
  if(hash==-1 && question==-1) return {};
  if(hash==-1) hash = url.length;
  var query = question==-1 || hash==question+1 ? url.substring(hash) :
  url.substring(question+1,hash);
  var result = {};
  query.split("&").forEach(function(part) {
    if(!part) return;
    part = part.split("+").join(""); // replace every + with space, regexp-free version
    var eq = part.indexOf("=");
    var key = eq>-1 ? part.substr(0,eq) : part;
    var val = eq>-1 ? decodeURIComponent(part.substr(eq+1)) :"";
    var from = key.indexOf("[");
    if(from==-1) result[decodeURIComponent(key)] = val;
    else {
      var to = key.indexOf("]",from);
      var index = decodeURIComponent(key.substring(from+1,to));
      key = decodeURIComponent(key.substring(0,from));
      if(!result[key]) result[key] = [];
      if(!index) result[key].push(val);
      else result[key][index] = val;
    }
  });
  return result;
}

我还根据本文替换了非编码的+空间，这对于如何编码遵循RFC 3986也很有用。

注意result[key][index] = val：创建一个新的数组项，它是可枚举的，因此可以通过forEach调用进行迭代。因此，您甚至可以解析像这样的URL

1
2
3
4
5
6
7
8
9
10
11
12
var url ="?foo%20e[]=a%20a&foo+e[%5Bx%5D]=b&foo e[]=c";
// {"foo e": ["a a", "c", "[x]":"b"]}

var obj = getJsonFromUrl(url)["foo e"];
for(var key in obj) { // Array.forEach would skip string keys here
  console.log(key,":",obj[key]);
}
/*
  0 : a a
  1 : c
  [x] : b
*/

您可以使用以下内容获取包含参数的JavaScript对象：

1
2
3
4
5
6
7
var regex = /[?&]([^=#]+)=([^&#]*)/g,
    url = window.location.href,
    params = {},
    match;
while(match = regex.exec(url)) {
    params[match[1]] = match[2];
}

正则表达式很可能会得到改善。它只查找由=字符分隔的名称 - 值对，并将它们自己分隔为&个字符(或第一个字符的=字符)。对于您的示例，上述结果将导致：

{v:"123", p:"hello"}

这是一个有效的例子。

1
2
var v = window.location.getParameter('v');
var p = window.location.getParameter('p');

现在v和p分别是123和hello的对象