当前位置: 首页 > news >正文

获取URL参数:split方法、URLSearchParams方法示例

在JavaScript中,可以使用多种方法来获取URL参数,其中常用的方法有split()和URLSearchParams()。

  1. 使用split()方法获取URL参数:

split()方法将字符串分割成数组。可以使用split()方法将URL分割成协议、主机、路径和查询字符串等部分。然后可以通过获取数组中的元素来获取URL参数。

示例代码:

// 获取URL参数
function getURLParams(url) {// 解析URLvar parser = document.createElement('a');parser.href = url;// 获取查询字符串var queryString = parser.search.substring(1);// 分割查询字符串var parameters = queryString.split('&');var params = {};// 遍历参数数组for (var i = 0; i < parameters.length; i++) {var parameter = parameters[i].split('=');var name = decodeURIComponent(parameter[0]);var value = decodeURIComponent(parameter[1]);// 存储参数params[name] = value;}return params;
}// 示例URL
var url = 'https://www.example.com/?name=John&age=20';// 获取URL参数
var params = getURLParams(url);// 输出参数
console.log(params.name); // John
console.log(params.age); // 20

  1. 使用URLSearchParams()方法获取URL参数:

URLSearchParams()是一个内置类,用于解析和处理URL查询字符串。它提供了一组方法来获取、添加、删除和迭代URL参数。

示例代码:

// 获取URL参数
function getURLParams(url) {// 解析URLvar parser = new URL(url);// 获取URLSearchParams对象var searchParams = parser.searchParams;// 创建参数对象var params = {};// 遍历URL参数for (var param of searchParams) {var name = param[0];var value = param[1];// 存储参数params[name] = value;}return params;
}// 示例URL
var url = 'https://www.example.com/?name=John&age=20';// 获取URL参数
var params = getURLParams(url);// 输出参数
console.log(params.name); // John
console.log(params.age); // 20

总结: 使用split()方法和URLSearchParams()方法都可以很方便地获取URL参数。split()方法比较适合简单的情况,而URLSearchParams()方法提供了更多的功能,适用于复杂的URL参数解析和处理。

🐱 个人主页:SHOW科技,公众号:SHOW科技
🙋‍♂️ 作者简介:2020参加工作,专注于前端各领域技术,共同学习共同进步,一起加油呀!
💫优质专栏:前端主流技术分享
📢 资料领取:前端进阶资料可以找我免费领取
🔥 摸鱼学习交流:我们的宗旨是在「工作中摸鱼,摸鱼中进步」,期待大佬一起来摸鱼!
————————————————
版权声明:本文为CSDN博主「SHOW科技」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
————————————————

相关文章:

获取URL参数:split方法、URLSearchParams方法示例

在JavaScript中&#xff0c;可以使用多种方法来获取URL参数&#xff0c;其中常用的方法有split()和URLSearchParams()。 使用split()方法获取URL参数&#xff1a; split()方法将字符串分割成数组。可以使用split()方法将URL分割成协议、主机、路径和查询字符串等部分。然后可…...

SparkSql---用户自定义函数UDFUDAF

文章目录 1.UDF2.UDAF2.1 UDF函数实现原理2.2需求:计算用户平均年龄2.2.1 使用RDD实现2.2.2 使用UDAF弱类型实现2.2.3 使用UDAF强类型实现 1.UDF 用户可以通过 spark.udf 功能添加自定义函数&#xff0c;实现自定义功能。 如&#xff1a;实现需求在用户name前加上"Name:…...

系统架构15 - 软件工程(3)

软件过程模型 瀑布模型特点缺点 原型化模型特点两个阶段不同类型注意 螺旋模型V 模型特点 增量模型特点 喷泉模型基于构件的开发模型(CBSD)形式化方法模型敏捷模型特点“适应性” (adaptive) 而非“预设性” (predictive)“面向人的” (People-oriented) 而非“面向过程的” (P…...

两个近期的计算机领域国际学术会议(软件工程、计算机安全):欢迎投稿

近期&#xff0c;受邀担任两个国际学术会议的Special session共同主席及程序委员会成员&#xff08;TPC member&#xff09;&#xff0c;欢迎广大学界同行踊跃投稿&#xff0c;分享最新研究成果。期待这个夏天能够在夏威夷檀香山或者加利福尼亚圣荷西与各位学者深入交流。 SERA…...

(二十一)Flask之上下文管理第二篇(细细扣一遍源码)

每篇前言&#xff1a; &#x1f3c6;&#x1f3c6;作者介绍&#xff1a;【孤寒者】—CSDN全栈领域优质创作者、HDZ核心组成员、华为云享专家Python全栈领域博主、CSDN原力计划作者 &#x1f525;&#x1f525;本文已收录于Flask框架从入门到实战专栏&#xff1a;《Flask框架从入…...

Java项目:基于SSM框架实现的企业员工岗前培训管理系统(ssm+B/S架构+源码+数据库+毕业论文)

一、项目简介 本项目是一套ssm821基于ssm框架实现的企业员工岗前培训管理系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格…...

深入了解Redis:选择适用于你的场景的持久化方案

自然语言处理的发展 文章目录 自然语言处理的发展强烈推荐前言&#xff1a;Redis提供了几种主要的持久化方案&#xff1a;RDB快照持久化&#xff1a;工作原理&#xff1a; AOF日志文件持久化&#xff1a;混合持久化&#xff1a; 总结强烈推荐专栏集锦写在最后 强烈推荐 前些天…...

【Git配置代理】Failed to connect to github.com port 443 问题解决方法

前言&#xff1a; 在学习代码审计时&#xff0c;有时会需要使用git去拉取代码&#xff0c;然后就出现了如下错误 看过网上很多解决方法&#xff0c;觉得问题的关键还是因为命令行在拉取/推送代码时并没有使用VPN进行代理。 解决办法 &#xff1a; 配置http代理&#xff1a;…...

python提取word文档内容的示例

一、微软Word历史、背景&#xff1a; Word 的特异功能就是把那些应该写成简单的 TXT 或 PDF 格式的文件&#xff0c;变成了既大又慢且难以打开的怪兽&#xff0c;它们经常在系统切换和版本切换中出现格式不兼容&#xff0c;而且因为某些原因在文件内容已经定稿后仍处于可编辑的…...

MarkDown快速入门-以Obsidian编辑器为例

直接上图&#xff0c;左右对应。 首先是基础语法。 # 标题&#xff0c;几个就代表几级标题&#xff1b;* 单个是序号&#xff0c;两个在一起就是斜体&#xff1b;- [ ] 代表任务&#xff0c;注意其中的空格&#xff1b; 然后是表格按钮代码 | 使用中竖线代表表格&#xff0c…...

【计算机网络】协议,电路交换,分组交换

定义了在两个或多个通信实体之间交换的报文格式和次序,以及报文发送和/或接收一个报文或其他事件所采取的动作.网络边缘: 端系统 (因为处在因特网的边缘) 主机 端系统 客户 client服务器 server今天大部分服务器都属于大型数据中心(data center)接入网(access network) 指将端…...

加速应用开发:低代码云SaaS和源码交付模式如何选

随着数字化转型的加速&#xff0c;企业对于快速开发和交付高质量应用的需求也越来越迫切。为了满足这一需求&#xff0c;开发者们开始探索采用低代码平台进行软件开发工作&#xff0c;以加速应用开发过程。 目前&#xff0c;市场上的低代码产品众多&#xff0c;但基本可分为简单…...

ATT汇编

指令后缀 AT&T格式的汇编指令有不同的后缀 其中 b表示byte&#xff0c;字节 w表示word&#xff0c;字/两字节 l表示long&#xff0c;32位系统下的long是4字节 q表示quad&#xff0c;意味四重&#xff0c;表示4个字/8字节 寄存器用途 参见 AT&T的汇编世界 - Gemfield…...

java split 拆分字符串

今天突然把java里split 跟&#xff0c;kotlin中的split 弄混了 kotlin中split 的用法跟python 中的split 用法是一样的&#xff0c;java中由于返回值是String[] 的数组&#xff0c;所以 在使用的时候需要注意下返回值如果要获取里面的内容&#xff0c;还是需要遍历下里面的内…...

【InternLM 大模型实战】作业与笔记汇总

笔记1&#xff1a;https://blog.csdn.net/weixin_42567071/article/details/135375937 笔记2&#xff1a;https://blog.csdn.net/weixin_42567071/article/details/135423120 作业2&#xff1a;https://github.com/xiaomile/InternLM-homework/tree/main/%E4%BD%9C%E4%B8%9A1 笔…...

解析PreMaint在石油化工设备预测性维护领域的卓越表现

石油化工行业一直在寻找能够确保设备高效运行的先进维护解决方案。在这个领域&#xff0c;PreMaint以其卓越的性能和创新的技术引起了广泛关注。 一、为何选择预测性维护&#xff1f; 传统的维护方法&#xff0c;基于固定的时间表&#xff0c;无法灵活应对设备的真实运行状况。…...

C++面试宝典第25题:阶乘末尾零的个数

题目 给定一个整数n,返回n!(n的阶乘)结果尾数中零的个数。 示例 1: 输入:3 输出:0 解释:3! = 6,尾数中没有零。 示例 2: 输入:5 输出:1 解释:5! = 120,尾数中有1个零。 解析 这道题主要考察应聘者对于数学问题的分析和理解能力,以及在多个解决方案中,寻求最优…...

PCIE 4.0 Equalizaiton(LTSSM 均衡流程)

1. 均衡 在Tx端有FFE&#xff08;Feed Forward Equalizer&#xff0c;前馈均衡器&#xff09;&#xff1b;在Rx端有&#xff1a;CTLE&#xff08;Continuous Time Linear Equalizer&#xff0c;连续时间线性均衡器&#xff09;和DFE&#xff08;Decision Feedback Equalizer&a…...

[libwebsockets]lighttpd+libwebsockets支持ws和wss配置方法说明

libwebsockets介绍 libwebsockets是一款轻量级用来开发服务器和客户端的C库。它不仅支持ws,wss还同时支持http与https,可以轻轻松松结合openssl等库来实现ssl加密。 官方参考链接: https://libwebsockets.org/ lighttpd版本 lighttpd/1.4.59 (ssl) - a light and fast w…...

常用软件安装

服务器版本为Centos7.8 x86_64 1.yum下载提速 1.wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo 2. yum clean all 3.yum makecache2.jdk yum install java-1.8.0-openjdk* -y # yum update 时自动更新jdk版本 1.yum -y install …...

YOLOv8与SenseVoice-Small的多模态安防监控系统设计

YOLOv8与SenseVoice-Small的多模态安防监控系统设计 1. 系统设计背景与价值 在现代安防监控领域&#xff0c;单纯依靠视频分析已经无法满足复杂场景下的安全需求。传统的监控系统往往需要人工实时监控&#xff0c;不仅效率低下&#xff0c;而且容易遗漏关键信息。特别是在夜间…...

别再只加Mask了!手把手教你用FlashAttention实现真正的Sliding Window Attention(附代码)

突破传统误区&#xff1a;用FlashAttention实现高效滑动窗口注意力的实战指南 在Transformer模型优化领域&#xff0c;许多开发者对滑动窗口注意力(Sliding Window Attention, SWA)存在一个普遍误解——认为只需在注意力矩阵上添加滑动窗口掩码就能实现线性复杂度。这种错误认…...

西门子S7-300 PLC实战:从零搭建药品装瓶机控制系统(附组态王6.55配置)

西门子S7-300 PLC实战&#xff1a;从零搭建药品装瓶机控制系统&#xff08;附组态王6.55配置&#xff09; 在制药生产线上&#xff0c;药品装瓶环节的效率直接影响整体产能。传统人工装瓶方式不仅速度慢&#xff0c;还容易产生计数误差。而采用PLC控制的自动化装瓶系统&#x…...

Discord社群运营神器:用AI自动回复提升活跃度的完整指南

Discord社群运营神器&#xff1a;用AI自动回复提升活跃度的完整指南 在数字社交时代&#xff0c;Discord已经从一个游戏语音工具成长为全球最受欢迎的社群平台之一。无论是Web3项目、开源社区还是兴趣小组&#xff0c;Discord都成为了连接成员的核心枢纽。但作为社群运营者&…...

网络基础知识整理(精简通用版)20260331-001篇

文章目录 网络基础知识整理(精简通用版) 一、网络基本概念 二、网络拓扑结构 三、OSI 七层模型(核心参考) 四、TCP/IP 模型(实际互联网标准) 五、IP 地址基础 六、传输层协议(TCP vs UDP) TCP(传输控制协议) UDP(用户数据报协议) 七、常见网络协议与端口 八、网络设…...

Linux网络命名空间实战:5分钟搞定veth pair跨命名空间通信

Linux网络命名空间实战&#xff1a;5分钟搭建隔离通信环境 在云计算和容器化技术蓬勃发展的今天&#xff0c;Linux网络命名空间已经成为系统管理员和开发者的必备技能。想象一下&#xff0c;当你需要在单台物理机上同时运行多个需要独立网络环境的服务时&#xff0c;传统方式可…...

程序实现环境温度对传感器的误差补偿,不同温度下测量精度一致,颠覆温漂难题。

无论你是做工业传感还是消费电子&#xff0c;只要你测物理量&#xff08;电压、电流、压力、流量&#xff09;&#xff0c;温度就是精度的头号杀手。今天我们用 Python 打造一套自适应温度补偿系统&#xff0c;让仪器在不同温度下“不忘初心”。一、 实际应用场景描述 (Scenari…...

Amlogic S9XXX设备系统改造完全指南:从入门到进阶

Amlogic S9XXX设备系统改造完全指南&#xff1a;从入门到进阶 【免费下载链接】amlogic-s9xxx-armbian Supports running Armbian on Amlogic, Allwinner, and Rockchip devices. Support a311d, s922x, s905x3, s905x2, s912, s905d, s905x, s905w, s905, s905l, rk3588, rk35…...

Python MCP服务部署卡在step3?揭秘92%开发者忽略的config.toml权限校验机制(配置失效终极诊断指南)

第一章&#xff1a;Python MCP服务部署卡在step3的典型现象与问题定位当执行 Python MCP&#xff08;Model Control Platform&#xff09;服务自动化部署脚本时&#xff0c;step3&#xff08;即服务容器化构建与镜像推送阶段&#xff09;常出现长时间无响应、日志停滞于 Buildi…...

京东开放平台应用申请实战:从零到一,避开那些“看不见”的坑

1. 为什么你需要这份京东开放平台避坑指南&#xff1f; 第一次申请京东开放平台应用时&#xff0c;我踩遍了所有能踩的坑。记得当时为了赶项目进度&#xff0c;直接跳过了官方文档的"不重要章节"&#xff0c;结果在云鼎环境配置环节卡了整整三天。后来才发现&#xf…...