如何使用JavaScript获取查询字符串？

Question

如何在JavaScript中从URL中提取查询字符串？

谢谢！

- Jayesh

---

可能是如何在JavaScript中获取查询字符串值？的重复问题。 - Sindre Sorhus

Answer 1

你可以轻松地构建一个类似字典的集合...

function getQueryStrings() { 
  var assoc  = {};
  var decode = function (s) { return decodeURIComponent(s.replace(/\+/g, " ")); };
  var queryString = location.search.substring(1); 
  var keyValues = queryString.split('&'); 

  for(var i in keyValues) { 
    var key = keyValues[i].split('=');
    if (key.length > 1) {
      assoc[decode(key[0])] = decode(key[1]);
    }
  } 

  return assoc; 
} 

然后像这样使用它...

var qs = getQueryStrings();
var myParam = qs["myParam"]; 

- Josh Stodola

---

希望你不介意，我修改了你的答案。unescape已经被弃用，应该使用decodeURIComponent来替代。你不应该解码完整的搜索字符串，因为这样会解码参数中的编码的&符号或等号，例如?test=fish%26chips。另外，我改进了代码以正确地将+解码为空格。请参考我在类似问题这里的回答。 - Andy E

@Andy 不，我一点也不介意！我同意你的看法。它本来可以很好地处理基本查询字符串，但现在这是一个更完整的答案。 - Josh Stodola

它说：“Uncaught SyntaxError: Invalid regular expression: /+/: Nothing to repeat”，我需要在意吗？ - The Student

@Tom 是的，那是一个需要修复的错误（这是 @Andy E 的错 :P）。我已经更新了答案以确保正确。 - Josh Stodola

我注意到如果没有指定参数，该函数会失败，因此我编辑了该函数（等待同行审查）！通过我的小改动，如果没有参数，它将返回一个空数组，我认为这是预期的结果（而不是未捕获的异常）。 - codeling

在等号上进行分割是不正确的行为。-- 只有遇到的第一个等号是参数名称的一部分；在和号之前，任何进一步的等号都应该被视为值的一部分。 - BrainSlugs83

Answer 2

如果您指的是地址栏中的URL，则

window.location.search

这将只提供查询字符串部分。请注意，这包括开头的问号。

如果您正在引用存储在（例如）字符串中的任何随机URL，则可以通过从第一个问号的索引处开始获取子字符串来获取查询字符串，例如：

url.substring(url.indexOf("?"))

这假设URL片段部分的任何问号都已经被正确编码了。如果在结尾有一个目标（即一个#后跟DOM元素的id），那么它也会包括在内。

- Syntactic

Answer 3

这是我使用的方法...

function Querystring() {
    var q = window.location.search.substr(1), qs = {};
    if (q.length) {
        var keys = q.split("&"), k, kv, key, val, v;
        for (k = keys.length; k--; ) {
            kv = keys[k].split("=");
            key = kv[0];
            val = decodeURIComponent(kv[1]);
            if (qs[key] === undefined) {
                qs[key] = val;
            } else {
                v = qs[key];
                if (v.constructor != Array) {
                    qs[key] = [];
                    qs[key].push(v);
                }
                qs[key].push(val);
            }
        }
    }
    return qs;
}

它返回一个字符串和数组的对象，似乎运行良好。 （单个键使用字符串，相同键具有多个值时使用数组。）

- B.B

Answer 4

你需要简单地使用以下函数。

function GetQueryStringByParameter(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
        return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

--- 如何使用 ---

var QueryString= GetQueryStringByParameter('QueryString');

- user2788596

Answer 5

现在浏览器中有一个新的API叫做URLSearchParams，它允许您提取和更改查询字符串的值。

目前，它似乎在Firefox 44+、Chrome 49+和Opera 36+中得到支持。

初始化/输入

要开始使用，创建一个新的URLSearchParams对象。对于当前的实现，您需要使用slice(1)从查询字符串中删除开头的“?”，就像Jake Archibald建议的那样：

var params = new URLSearchParams(window.location.search.slice(1)); // myParam=12

在后续的实现中，您应该能够在不使用切片的情况下使用它：

var params = new URLSearchParams(window.location.search); // myParam=12

获取

您可以通过.get方法从中获取参数：

params.get('myParam'); // 12

设置

可以使用.set更改参数：

params.set('myParam', 'newValue');

输出

如果需要再次使用当前查询字符串，则 .toString 方法提供了它：

params.toString(); // myParam=newValue

这个API中还有许多其他方法。

填充

由于浏览器支持仍然不够完善，Andrea Giammarchi编写了一个小型填充(<3kB)。

- nils

---

这太棒了。我想再补充一个关于这种方法的优点，它似乎可以自动解码值。例如，如果一个值包含编码的@符号（%40），这个方法将返回“@”，而不是编码值“%40”。 - Americus

Answer 6

对我来说没问题。

function querySt(Key) {

    var url = window.location.href;

    KeysValues = url.split(/[\?&]+/); 

    for (i = 0; i < KeysValues.length; i++) {

            KeyValue= KeysValues[i].split("=");

            if (KeyValue[0] == Key) {

                return KeyValue[1];

        }

    }

}

function GetQString(Key) {     

    if (querySt(Key)) {

         var value = querySt(Key);

         return value;        

    }

 }

- Abhimanyu Garg

Answer 7

非常简单！

function parseQueryString(){
    var assoc = {};
    var keyValues = location.search.slice(1).split('&');
    var decode = function(s){
        return decodeURIComponent(s.replace(/\+/g, ' '));
    };

    for (var i = 0; i < keyValues.length; ++i) {
        var key = keyValues[i].split('=');
        if (1 < key.length) {
            assoc[decode(key[0])] = decode(key[1]);
        }
    }

    return assoc;
}

- Andrew

Answer 8

我使用过这种方法

function getString()
{
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 buisnessArea = getString();

- Amay Kulkarni

Answer 9

// Assuming "?post=1234&action=edit"

var urlParams = new URLSearchParams(window.location.search);

console.log(urlParams.has('post')); // true

console.log(urlParams.get('action')); // "edit"

console.log(urlParams.getAll('action')); // ["edit"]

console.log(urlParams.toString()); // "?post=1234&action=edit"

console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"

- praveen kedar

Answer 10

您可以使用以下Javascript代码：

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

OR

你也可以使用插件 jQuery-URL-Parser 来检索 URL 的所有部分，包括锚点、主机等。

使用非常简单和酷：

$.url().param("itemID")

通过James&Alfa

- Gagan Gami