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

2024-03-26

有没有一种无插件的检索方式请求参数 http://en.wikipedia.org/wiki/Query_string通过 jQuery 获取值(或不通过 jQuery)?

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


Use URL搜索参数 https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams#Browser_compatibility从查询字符串中获取参数。

例如:

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

更新:2022 年 1 月

Using Proxy() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy is faster https://jsben.ch/MeP5G比使用Object.fromEntries() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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 月

您可以使用URL搜索参数 https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams#Browser_compatibility这很简单并且有不错的(但不完整)浏览器支持 https://caniuse.com/urlsearchparams.

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

Original

您不需要 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, ' '));
}

Usage:

// 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)。对此没有标准,用法也各不相同,请参见以下问题:重复 HTTP GET 查询键的权威位置 https://stackoverflow.com/questions/1746507/authoritative-position-of-duplicate-http-get-query-keys.

注意:该函数区分大小写。如果您喜欢不区分大小写的参数名称,将 'i' 修饰符添加到 RegExp https://stackoverflow.com/questions/3939715/case-insensitive-regex-in-javascript

注意:如果您遇到 no-useless-escape eslint 错误,您可以替换name = name.replace(/[\[\]]/g, '\\$&'); with name = name.replace(/[[\]]/g, '\\$&').


这是基于新版本的更新URLSearchParams 规范 https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams更简洁地实现相同的结果。请参阅标题为“URL搜索参数 https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript/901144#12151322" below.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 JavaScript 中获取查询字符串值? 的相关文章

随机推荐

  • 如何处理 GTK+3 中的键盘事件?

    我应该使用什么信号 函数来获取 GTK 3 中的键盘输入 我环顾四周 我所知道的唯一教程涵盖 GTK 3 zetcode http zetcode com gfx cairo and 侏儒开发者 https developer gnome
  • 如何使用GDB调试一个大项目?

    现在我有一个c语言项目 其中包括三个目录 bin inc and src 所有头文件 h 包含在 inc和所有源 c 文件存储在 src 即a c b c c c 最终生成的可执行文件位于 bin makefile编译后 会生成所有的obj
  • 如何更改 Mac OS X 系统菜单上的 Qt 应用程序名称?

    我的 Qt 应用程序在 Mac OS X 菜单上显示为一个相当不友好的名称 名字看起来像我的时髦应用程序 我该如何将其更改为更讨人喜欢的内容 拥有一个 Info plist 并将 CFBundleName 设置为您喜欢的名称
  • 单击在 Listitem Listview android 上不起作用

    我实现了安卓listview与ListActivity 这里我遇到的问题是 当我单击列表项时 当闪烁颜色也没有出现 即橙色 时 不会执行任何操作 那么您对我的问题的友好回答有什么想法吗 Override protected void onL
  • Bootstrap Modal 与 Chart.js 折线图

    我有一个推特Bootstrap 3 模态 http getbootstrap com javascript modals窗口 我想画一个Chart js https github com nnnick Chart js里面的折线图 但每次我
  • Android Renderscript 高级 rsForEach 调用的文档

    我有一个关于带有 rs script call t 参数的 Android Renderscript rsForEach 函数如何工作的问题 在示例中 仅使用另一个 简单的 rsForEach 函数 因此这对我没有帮助 我想更改数组的 xS
  • Flask - 对 POST 的响应 - 令人困惑的行为

    我对 Flask 中的以下行为感到完全困惑 我确信发生了一些基本的事情 但我不知道这是脚本还是服务器问题 所以我发布了我能想到的最短的示例 该页面有两种方式将数据发布到服务器 一种是通过提交
  • Xcode打印字典的键和值

    Xcode 7 中的打印描述给出了类似于下面的内存地址 尝试了所有选项 但得到这样的输出 3 elements 0 2 elements 0 Output 1 3 elements 0 2 elements 0 type 1 Output2
  • c++ less 运算符重载,使用哪种方式?

    例如 在 C 头文件中 如果我定义了struct Record我想用它进行可能的排序 以便我想重载less operator 以下是我在各种代码中注意到的三种方法 我粗略地注意到 如果我要放Record into a std set map
  • Android maxLines 和 minLines 属性在 XML 中不起作用

    我有一个 XML 文件 其中包含EditText具有这些属性
  • 验证设计模式

    我正在为我们的一个部门编写一个数据验证实用程序 它有以下要求 动态添加新的业务实体 动态地向实体添加新的验证 用于显示业务实体列表及其验证的 UI 用户可以选择开始对所有或选定的业务实体进行验证 如果任何验证失败 UI 将显示验证错误消息
  • 如果应用了 java 插件,Gradle 无法在复合构建中找到 zip 工件

    我有一个 Gradle 项目 它创建一个 zip 工件 我通过定义工件artifacts add default zipTask 我通过以下方式将此项目添加到另一个项目includeBuild并使用 zip 作为依赖项 dependenci
  • 阻止用户将BMP、TIFF等图像上传到Plone中的ImageField

    用户这样做是因为他们可以 但是 图像自动调整大小等功能会出现故障 这让我成为一个悲伤的男孩 如何限制全站图像上传为 GIF PNG 和 JPEG 对于原型 为了灵巧 使用原型 您可以覆盖图像内容类或使用以下架构创建您自己的自定义图像内容类
  • emacs 智能感知

    我知道这个问题已经讨论过很多次了 但是 emacs 中的 c c intellisense 有什么好的方法吗 我一直无法正确设置 cedet 现在我正在开发一个具有庞大代码库的维护项目 如果没有适当的智能感知 管理起来非常困难 目前我正在使
  • 在每个向量条目处求和到向量末尾

    I have X lt c 1 2 3 4 5 6 我想要 X 之和的输出为 Y lt c 21 20 18 15 11 6 我继续读下去rollapply但它一次只能求和 3 个连续的数字 所以有人可以帮助我吗 你需要cumsum Try
  • 将 Console.WriteLine() 输出重定向到字符串

    我需要采取Console WriteLine 输出 并附加到字符串 我无法更改 Main 方法以简单地附加到字符串而不是写入控制台 我需要一种方法来从控制台读取所有写入的行并将它们附加到字符串 目前 我一直在使用FileStream并将控制
  • Android,有没有参考资料可以查看Android默认图标和图像是什么?

    当我想要设计 UI 时 我需要知道什么是预定义图标 我搜索了网络包括http developer android com design index html http developer android com design index h
  • 调整 coord_pol() 直方图中文本标签的位置

    我陷入了一个小标签问题 即用 ggplot2 制作的一系列极坐标直方图 圆环 这些东西怎么称呼 以下是数据和图表外观的简化示例 df lt data frame Attribute1 10 Attribute2 1 Attribute3 2
  • 如何修复 pip install 产生的 gcc 错误?

    我尝试使用以下命令从 PyPI 安装 python 包 sudo pip3 install switcheo 安装失败并显示以下错误消息 gcc Wno unused result Wsign compare Wunreachable co
  • 如何在 JavaScript 中获取查询字符串值?

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 有没有一种无插件的检索方式请求参数 http en wikipedia org wiki