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

更新日期： 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)

注意：如果某个参数存在多次 （），您将获得第一个值 （）。对此没有标准，用法也各不相同，例如，请参阅以下问题：重复 HTTP GET 查询键的权威位置。?foo=lorem&foo=ipsumlorem

注意：该函数区分大小写。如果您更喜欢不区分大小写的参数名称，请将“i”修饰符添加到正则表达式

注意：如果收到无用转义 eslint 错误，则可以替换为 。name = name.replace(/[\[\]]/g, '\\$&');name = name.replace(/[[\]]/g, '\\$&')

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

此处发布的一些解决方案效率低下。每次脚本需要访问参数时重复正则表达式搜索是完全不必要的，只需一个函数即可将参数拆分为关联数组样式的对象。如果您没有使用 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中定义，我不会用源代码污染这个答案。对于那些对“污染”版本感兴趣的人，看看下面的坎贝尔的答案。

此外，正如注释中指出的那样，是对的法律分隔符。它需要一个更复杂的正则表达式来处理 或 ，我认为这是不必要的，因为它很少被使用，我会说更不可能同时使用两者。如果您需要支持而不是 ，只需在正则表达式中交换它们即可。;key=value;&;;&

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

简单多了！

#UPDATED

新功能是检索重复的参数，如下所示。没有规范，但是，当前的大多数方法都遵循数组的生成。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]);
        }
    }
})();