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

Question

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

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

原文由 Subliminal Hash 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 1

更新：2022 年 1 月

使用 Proxy() 比使用 Object.fromEntries() 更快 并且得到更好的支持

const params = new Proxy(new URLSearchParams(window.location.search), {
 get: (searchParams, prop) => searchParams.get(prop),
 });
 // Get the value of "some_key" in eg "https://example.com/?some_key=some_value"
 let value = params.some_key; // "some_value"

更新：2021 年 6 月

对于需要所有查询参数的特定情况：

 const urlSearchParams = new URLSearchParams(window.location.search);
 const params = Object.fromEntries(urlSearchParams.entries());

更新：2018 年 9 月

您可以使用简单的 URLSearchParams 并且具有 不错的（但不完整）浏览器支持。

 const urlParams = new URLSearchParams(window.location.search);
 const myParam = urlParams.get('myParam');

原来的

为此，您不需要 jQuery。您可以只使用一些纯 JavaScript：

 function getParameterByName(name, url = window.location.href) {
 name = name.replace(/[\[\]]/g, '\\$&');
 var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
 results = regex.exec(url);
 if (!results) return null;
 if (!results[2]) return '';
 return decodeURIComponent(results[2].replace(/\+/g, ' '));
 }

用法：

 // query string: ?foo=lorem&bar=&baz
 var foo = getParameterByName('foo'); // "lorem"
 var bar = getParameterByName('bar'); // "" (present with empty value)
 var baz = getParameterByName('baz'); // "" (present with no value)
 var qux = getParameterByName('qux'); // null (absent)

注意：如果一个参数出现多次（ ?foo=lorem&foo=ipsum ），您将获得第一个值（ lorem ）。对此没有标准，用法各不相同，例如，请参阅这个问题： Authoritative position of duplicate HTTP GET query keys 。

注意：该函数区分大小写。如果您更喜欢不区分大小写的参数名称， 请将 ‘i’ 修饰符添加到 RegExp

注意：如果你得到一个 no-useless-escape eslint 错误，你可以替换 name = name.replace(/[\[\]]/g, '\\$&'); 与 name = name.replace(/[[\]]/g, '\\$&') 。

---

这是基于新 URLSearchParams 规范 的更新，以更简洁地实现相同的结果。请参阅下面标题为“ URLSearchParams ”的答案。

原文由 Artem Barger 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

此处发布的一些解决方案效率低下。每次脚本需要访问参数时都重复正则表达式搜索是完全没有必要的，一个将参数拆分为关联数组样式对象的函数就足够了。如果您不使用 HTML 5 History 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>

简单多了！

＃更新

一项新功能是检索重复的参数，如下 myparam=1&myparam=2 。没有 _规范_，但是，大多数当前方法都遵循数组的生成。

 myparam = ["1", "2"]

所以，这是管理它的方法：

 let urlParams = {};
(window.onpopstate = function () {
    let 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);

    while (match = search.exec(query)) {
        if (decode(match[1]) in urlParams) {
            if (!Array.isArray(urlParams[decode(match[1])])) {
                urlParams[decode(match[1])] = [urlParams[decode(match[1])]];
            }
            urlParams[decode(match[1])].push(decode(match[2]));
        } else {
            urlParams[decode(match[1])] = decode(match[2]);
        }
    }
})();

原文由 Andy E 发布，翻译遵循 CC BY-SA 4.0 许可协议