从“GET”参数(JavaScript)中获取值

2022-08-29 21:59:26

我有一个包含一些GET参数的URL,如下所示:

www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 

我需要得到 的全部值。我试图阅读URL,但我只得到了.如何使用JavaScript执行此操作?cm2


答案 1

JavaScript 本身没有任何内置的用于处理查询字符串参数的内容。

在(现代)浏览器中运行的代码可以使用 URL 对象Web API)。 也由 Node 实现.jsURL

// You can get url_string from window.location.href if you want to work with
// the URL of the current page
var url_string = "http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5"; 
var url = new URL(url_string);
var c = url.searchParams.get("c");
console.log(c);

对于较旧的浏览器(包括 Internet Explorer),您可以使用此 polyfill

您还可以将一个用于URLSearchParams,并提取查询字符串以使用传递给它。window.location.search.substring(1)


您还可以使用此答案的原始版本中的代码,该版本早于 。上面的polyfill是健壮的,经过了充分的测试,我强烈建议它超过这个。URL

您可以访问 ,这将提供从字符到URL的末尾或片段标识符的开头(#foo),以先到者为准。location.search?

然后你可以用这个来解析它:

function parse_query_string(query) {
  var vars = query.split("&");
  var query_string = {};
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    var key = decodeURIComponent(pair.shift());
    var value = decodeURIComponent(pair.join("="));
    // If first entry with this name
    if (typeof query_string[key] === "undefined") {
      query_string[key] = value;
      // If second entry with this name
    } else if (typeof query_string[key] === "string") {
      var arr = [query_string[key], value];
      query_string[key] = arr;
      // If third or later entry with this name
    } else {
      query_string[key].push(value);
    }
  }
  return query_string;
}

var query_string = "a=1&b=3&c=m2-m3-m4-m5";
var parsed_qs = parse_query_string(query_string);
console.log(parsed_qs.c);

您可以使用以下命令从当前页面的 URL 获取查询字符串:

var query = window.location.search.substring(1);
var qs = parse_query_string(query);

答案 2

我见过的大多数实现都错过了对名称和值进行URL解码。

下面是一个通用的实用程序函数,也可以执行正确的URL解码:

function getQueryParams(qs) {
    qs = qs.split('+').join(' ');

    var params = {},
        tokens,
        re = /[?&]?([^=]+)=([^&]*)/g;

    while (tokens = re.exec(qs)) {
        params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
    }

    return params;
}

//var query = getQueryParams(document.location.search);
//alert(query.foo);