如何使用JavaScript获取所有查询字符串值

Question

我想从URL中获取查询字符串的所有参数值。

例如：www.xyz.com?author=bloggingdeveloper&a1=hello

我想使用JavaScript获取author和a1参数的值。

- amit

---

在“相关”列表中有太多重复的选择... - Pekka

SO机器人太忙于炫耀，以至于他们不理解问题...他要求返回_ALL_查询参数作为数组，而不是他期望的查询参数。 - Toskan

Answer 1

最简单的方法是：

const search = /*your search query ex:-?author=bloggingdeveloper&a1=hello*/
const params = new URLSearchParams(search);
let paramObj = {};
for(var value of params.keys()) {
     paramObj[value] = params.get(value);
 }

如果你控制台输出paramObj，你会得到以下结果：

{
author: bloggingdeveloper,
a1: hello
}

简单！！

参考:- https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/keys

- Ayesha Mundu

---

谢谢，伙计！你是个英雄。我也加了自己的答案，用了一点点功能性的ES6。=) - Dan Zuzevich

注意：在Internet Explorer中，您需要URLSearchParams的polyfill。 - Johnny Oshika

迭代器/生成器需要使用regenerator-runtime，这对于本指南来说太过笨重，因此不能允许它们。另外，应该避免使用循环，而应当选择数组迭代。 - Tushar Mistry

Answer 2

如果你正在和优秀的开发者打交道，我认为这并不过于复杂。将param.keys()迭代器转换为数组，这样你就可以使用reduce函数。

const params = new URLSearchParams(window.location.search);

const paramsObj = Array.from(params.keys()).reduce(
  (acc, val) => ({ ...acc, [val]: params.get(val) }),
  {}
);

这将会给你一个如下的对象：

{
  a: any,
  b: any,
  c: any,
  ...etc
}

当然，a、b、c��及假设的查询参数名称，还有使用的“any”。

- Dan Zuzevich

Answer 3

function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

var author = getUrlVars()["author"];
var a1 = getUrlVars()["a1"];

- TimT

---

这个函数可能没问题，但是最后两行有问题。你对查询字符串进行了两次解析 - 最好将返回值分配给另一个变量。哦，还有你在最后一行忘记了一个 =。 - ThiefMaster

Answer 4

您可以使用类似以下方式的方法：

function parseQuerystring(){
    var foo = window.location.href.split('?')[1].split('#')[0].split('&');
    var dict = {};
    var elem = [];
    for (var i = foo.length - 1; i >= 0; i--) {
        elem = foo[i].split('=');
        dict[elem[0]] = elem[1];
    };
    return dict;
};

从您的查询字符串返回JS对象的函数。

//www.xyz.com?author=bloggingdeveloper&a1=hello
>parseQuerystring()
{
  author: bloggingdeveloper,
  a1: hello
}

- NilColor

Answer 5

试试这个：

function urlParameter() {
    var url = window.location.href,
    retObject = {},
    parameters;

    if (url.indexOf('?') === -1) {
        return null;
    }

    url = url.split('?')[1];

    parameters = url.split('&');

    for (var i = 0; i < parameters.length; i++) {
        retObject[parameters[i].split('=')[0]] = parameters[i].split('=')[1];
    }

    return retObject;
}

输出JSON对象：

{
     author : 'bloggingdeveloper',
     a1 : 'hello'
}

获取特定值：

var author = urlParameter().author;
alert(author);

- Shlomi Komemi

Answer 6

我发现这个问题并开始使用由TimT建议的答案，但发现有些情况下我的URL并没有查询字符串。TimT的函数将简单地返回URL，但我发现最好要么从查询字符串返回变量数组，要么只是返回false以进行简单的检查。

我进一步改用window.location.search，因为查询字符串已经提供给我们，无需分离它。

function getUrlVars() {
    var vars = [], hash;
    var query_string = window.location.search;

    if (query_string) {
        var hashes = query_string.slice(1).split('&');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars[hash[0]] = hash[1];
        }

        return vars;
    } else {
        return false;
    }
}

- TheGremlyn

---

你滥用了你的数组...你没有正确使用它。 - Toskan

你可能想要调用 decodeURIComponent(hash[1]);。 - Toskan

@Toskan 感谢你挖掘出这个，我想3年前的我并不擅长JS，哈哈。 - TheGremlyn

Answer 7

          var search = function() {
          var p = window.location.search.substr(1).split(/\&/), l = p.length, kv, r = {};
          while (l--) {
             kv = p[l].split(/\=/);
             r[kv[0]] = kv[1] || true; //if no =value just set it as true
          }
             return r;
          }();

- balaphp

Answer 8

这个函数存储URL参数，因此非常高效（尽管它使用了全局变量 :-( ）：

var urlParams = {};
(function () {
    var e,
    a = /\+/g,  // Regex for replacing addition symbol with a space
    r = /([^&=]+)=?([^&]*)/g,
    d = function (s) {
        return decodeURIComponent(s.replace(a, " "));
    },
    q = window.location.search.substring(1);

    while (e = r.exec(q))
        urlParams[d(e[1])] = d(e[2]);
})();

- Manse

Answer 9

在URL上设置一个标识，例如url.com?id=9，然后将其作为参数发送以调用函数并使用{{link1：URLSearchParams}}。

- Guilherme Calabria

Answer 10

使用它

var get_vars = window.location.search;
var patt1 = /author\=(.+)\&/;
alert(get_vars.match(patt1)[1]);

上述代码的作用如下：

仅将域名中的查询字符串加载到get_vars变量中，
然后将一个正则表达式模式分配给patt1，该模式可以匹配作者变量及其值
最后弹出匹配的用户名。

- KodeFor.Me