如何获取JavaScript中的查询字符串值？

JavaScript

A村村

2020-03-09

是否有通过jQuery（或不通过jQuery）检索查询字符串值的无插件方法？

如果是这样，怎么办？如果没有，是否有可以做到的插件？

第174篇《如何获取JavaScript中的查询字符串值？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共7个回答

蛋蛋猿 2020.03.09

function GET() {
        var data = [];
        for(x = 0; x < arguments.length; ++x)
            data.push(location.href.match(new RegExp("/\?".concat(arguments[x],"=","([^\n&]*)")))[1])
                return data;
    }


example:
data = GET("id","name","foo");
query string : ?id=3&name=jet&foo=b
returns:
    data[0] // 3
    data[1] // jet
    data[2] // b
or
    alert(GET("id")[0]) // return 3

路易达蒙 2020.03.09

我经常使用正则表达式，但并非如此。

对我来说，在应用程序中读取一次查询字符串，然后从所有键/值对构建对象似乎更容易和更有效，例如：

var search = function() {
  var s = window.location.search.substr(1),
    p = s.split(/\&/), l = p.length, kv, r = {};
  if (l === 0) {return false;}
  while (l--) {
    kv = p[l].split(/\=/);
    r[kv[0]] = decodeURIComponent(kv[1] || '') || true;
  }
  return r;
}();

对于类似的URL，http://domain.com?param1=val1&param2=val2您可以稍后在代码中使用search.param1和获得它们的值search.param2。

十三西门 2020.03.09

从MDN：

function loadPageVar (sVar) {
  return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}

alert(loadPageVar("name"));

小胖前端逆天 2020.03.09

高尔夫代码：

var a = location.search&&location.search.substr(1).replace(/\+/gi," ").split("&");
for (var i in a) {
    var s = a[i].split("=");
    a[i]  = a[unescape(s[0])] = unescape(s[1]);
}

显示它！

for (i in a) {
    document.write(i + ":" + a[i] + "<br/>");   
};

在我的Mac上：test.htm?i=can&has=cheezburger显示

0:can
1:cheezburger
i:can
has:cheezburger

小小 2020.03.09

我喜欢Ryan Phelan的解决方案。但是我没有看到为此扩展jQuery的任何意义？没有使用jQuery功能。

另一方面，我喜欢Google Chrome中的内置功能：window.location.getParameter。

那么为什么不使用它呢？好的，其他浏览器没有。因此，如果此函数不存在，请创建它：

if (!window.location.getParameter ) {
  window.location.getParameter = function(key) {
    function parseParams() {
        var params = {},
            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))
            params[d(e[1])] = d(e[2]);

        return params;
    }

    if (!this.queryStringParams)
        this.queryStringParams = parseParams(); 

    return this.queryStringParams[key];
  };
}

此功能或多或少与Ryan Phelan相同，但是它的包装方式有所不同：名称清晰且不依赖其他javascript库。有关此功能的更多信息，请访问我的博客。

null 2020.03.09

tl; dr

一种快速，完整的解决方案，可以处理多值键和编码字符。

var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {var s = item.split("="), k = s[0], v = s[1] && decodeURIComponent(s[1]); (qd[k] = qd[k] || []).push(v)})

//using ES6   (23 characters cooler)
var qd = {};
if (location.search) location.search.substr(1).split`&`.forEach(item => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v)})

多行：

var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {
    var s = item.split("="),
        k = s[0],
        v = s[1] && decodeURIComponent(s[1]); //  null-coalescing / short-circuit
    //(k in qd) ? qd[k].push(v) : qd[k] = [v]
    (qd[k] = qd[k] || []).push(v) // null-coalescing / short-circuit
})

这些代码是什么...
“ null-coalescing”，短路评估
ES6解构分配，箭头功能，模板字符串

例：

"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

> qd.a[1]    // "5"
> qd["a"][1] // "5"

来自评论

* !!! 请注意，它decodeURIComponent(undefined)返回string "undefined"。解决方案在于的简单用法&&，以确保decodeURIComponent()不会在未定义的值上调用。（请参见顶部的“完整解决方案”。）

v = v && decodeURIComponent(v);

如果querystring为空（location.search == ""），则结果会产生误导qd == {"": undefined}。建议像下面这样启动解析功能之前检查查询字符串：

if (location.search) location.search.substr(1).split("&").forEach(...)

宝儿小哥小卤蛋 2020.03.09

这里发布的一些解决方案效率低下。完全不需要每次脚本需要访问参数时都重复进行正则表达式搜索，只需一个函数即可将参数拆分为关联数组样式的对象。如果您不使用HTML 5历史记录API，则每个页面加载仅需要一次。此处的其他建议也无法正确解码URL。

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

    urlParams = {};
    while (match = search.exec(query))
       urlParams[decode(match[1])] = decode(match[2]);
})();

示例查询字符串：

?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty

结果：

 urlParams = {
    enc: " Hello ",
    i: "main",
    mode: "front",
    sid: "de8d49b78a85a322c4155015fdce22c4",
    empty: ""
}

alert(urlParams["mode"]);
// -> "front"

alert("empty" in urlParams);
// -> true

这也可以轻松地改进以处理数组样式的查询字符串。这方面的一个例子是在这里，但由于阵列式的参数没有定义RFC 3986我不会污染这个答案的源代码。对于那些对“污染”版本感兴趣的人，请查看下面的Campbeln的答案。

另外，正如评论中指出的那样，这;是key=value成对的合法分隔符。它将需要更复杂的正则表达式来处理;或&，我认为这是不必要的，因为很少;使用正则表达式，并且我说这两种情况都不太可能使用。如果您需要支持;而不是&，只需在正则表达式中交换它们即可。

如果使用服务器端预处理语言，则可能要使用其本机JSON函数为您完成繁重的工作。例如，在PHP中，您可以编写：

<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>

简单得多！

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android

tl; dr

阅读更多关于Vanilla JavaScript解决方案的信息。

最简单的（虚拟）解决方案

多值键

编码字符？

来自评论