【问题标题】:How do I parse a URL query parameters, in Javascript? [duplicate]如何在 Javascript 中解析 URL 查询参数? [复制]
【发布时间】:2012-01-19 03:25:13
【问题描述】:

可能重复:
Use the get paramater of the url in javascript
How can I get query string values in JavaScript?

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

喜欢:

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

我可以在 JSON 对象中获取“v”和“p”吗?

【问题讨论】:

标签: javascript url query-string string-parsing


【解决方案1】:

你可以得到一个包含参数的 JavaScript 对象,如下所示:

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

正则表达式很可能会得到改进。它只是查找由= 字符分隔的名称-值对,以及由& 字符分隔的对本身(或第一个字符为= 字符)。对于您的示例,上述结果将导致:

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

这是working example

【讨论】:

  • 为什么不使用window.location.getParameter?
  • 您的示例不返回对象(它返回 2 个字符串),并且它要求您事先知道参数的名称,鉴于 OP 正在尝试做的事情,这不太可能是案子。另外,getParameter 的文档在哪里?
  • 参数名称在技术上是[^=#&]+ 而不仅仅是[^=#]+ - 没有值的名称是合法且常见的。还要确保名称和值都被解码:params[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
【解决方案2】:

今天(这个答案后 2.5 年)你可以safely useArray.forEach。正如@ricosrealm 建议的那样,decodeURIComponent 用于此功能。

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;
}

其实没那么简单,看cmet里的同行评议,尤其是:

  • 基于哈希的路由 (@cmfolio)
  • 数组参数 (@user2368055)
  • 正确使用decodeURIComponent和非编码=(@AndrewF)
  • 非编码+(由我添加)

更多详情,请参阅MDN articleRFC 3986

也许这应该去 codereview SE,但这里是更安全且无正则表达式的代码:

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;
}

这个函数甚至可以解析像这样的URL

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
*/

【讨论】:

  • 每个项目都应该使用 decodeURIComponent() 进行 url 解码
  • location.search 不适用于基于哈希的路由:http://localhost:9000/#/documents?lang=es 将为location.search 返回一个空字符串。您必须改用location.hashlocation.href
  • 参数名和值都必须解码。这是一个常见的错误。所以应该是:result[decodeURIComponent(item[0])] = decodeURIComponent(item[1]); 而不是result[item[0]] = decodeURIComponent(item[1]);
  • 还要注意,对于包含未编码 = 的参数值,使用 split("=") 将失败,这并不常见,但肯定会发生。我建议使用正则表达式,以便在保持简洁的同时获得更好的逻辑。
  • @GuillermoMoscoso 然后你会得到像genre=R&B&name=John 这样无法正确解析的字符串。拆分字符串后需要解码,知道什么是key什么是value,方括号作为“key in keys”这里需要特别注意,见代码。
猜你喜欢
  • 1970-01-01
  • 2019-01-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-10-14
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多