小编典典

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

javascript

是否有通过 jQuery(或没有)检索查询字符串值的无插件方式?

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


阅读 300

收藏
2022-01-27

共1个答案

小编典典

新:2022 年 1 月

UsingProxy()比using性能Object.fromEntries()更高,并且得到更好的支持

const params = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop),
});

更新: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)。对此没有标准,用法各不相同,

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

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

2022-01-27