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

Question

可能的重复：
在javascript中使用url的get参数< br> 如何在 JavaScript 中获取查询字符串值？

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

例如：

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

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

Answer 1

提出问题 2.5 年后您可以安全使用 Array.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;
}

实际上没那么简单，请参阅评论中的同行评审，特别是：

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

有关更多详细信息，请参阅 MDN 文章 和 RFC 3986。

也许这应该去 codereview SE，但这里有更安全且无正则表达式的代码：

function getSearchOrHashBased(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;
  return question==-1 || hash==question+1
    ? url.substring(hash)
    : url.substring(question+1, hash);
}

// use query = getSearchOrHashBased(location.href)
// or query = location.search.substring(1)
function getJsonFromUrl(query) {
  var result = {};
  query.split("&").forEach(function(part) {
    if(!part) return;
    part = part.replaceAll("+", " ");
    var eq = part.indexOf("=");
    var key = eq>-1 ? part.substring(0,eq) : part;
    var val = eq>-1 ? decodeURIComponent(part.substring(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;
}

该函数甚至可以解析类似

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

问题提出 7 年后的 URL，该功能被标准化为 URLSearchParams 4年后，访问可以通过 代理 进一步简化，如 < a href="https://stackoverflow.com/a/901144/343721">这个答案，但是这个新答案无法解析上面的示例网址。

Answer 2

您可以获得一个包含如下参数的 JavaScript 对象：

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

正则表达式很可能会得到改进。它只是查找由 = 字符分隔的名称-值对，以及由 & 字符分隔的名称/值对（或用于表示名称的 = 字符）第一个）。对于您的示例，上面的结果将是：

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

这是一个 工作示例。