快速获取url路径参数方法

如何根据当前url获取路径上的参数值?

例:

// 若网页前路径url
https://editor.csdn.net/md/?id=1&workId=2&name=小包子

方法如下:

  urlGetParam(param) {const reg = new RegExp(`(^|&)${param}=([^&]*)(&|$)`);const r = decodeURIComponent(window.location.search.substr(1)).match(reg);if (r != null) return unescape(r[2]);return null;}// 使用const id = urlGetParam('id');const workId = urlGetParam('workId');const name = urlGetParam('name'); console.log(id,workId,name)  // 1,2,小包子 

解析:
new RegExp‌ 是 JavaScript 中创建正则表达式对象的一种方式。

(^|&) 表示行首或者以&开头(^)
param 表示传进来的变量
= 还是表示等号
([^&]*) 表示非(^)&的任意(*)个字符 (0到多个)
(&|$) 表示以&结束或者是行尾($)

decodeURIComponent‌ 是 JavaScript 中的一个内置函数,用于将通过 encodeURIComponent 编码的 URI 组件解码,还原为原始的字符串形式。
xxx.match(reg)中match的使用意思是找到字符串中符合正则条件的内容返回。即把字符串中符合正则要求的第一项以及一些其他信息,以数组的形式返回reg则是上已经定义好的正则规则。
window.location.search.substring(1)为JavaScript 中获取当前url链接中的?号后的参数

id=1&workId=2&name=小包子

·unescape函数‌是JavaScript中的一个全局函数,用于将被转义的字符串还原成原始字符串

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/61690.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows实现VNC连接ubuntu22.04服务器

最近弄了一个700块钱的mini主机,刷了ubuntu22.04系统,然后想要在笔记本上通过VNC连接,这样就有了一个linux的开发环境。最后实现的过程为: 安装vnc服务器 安装 VNC 服务器软件: sudo apt update sudo apt install t…

Perforce《2024游戏技术现状报告》Part3:生成式AI、版本控制、CI/CD等游戏技术的未来趋势与应用

游戏开发者一直处于创新前沿。他们的实践、工具和技术受到各行各业的广泛关注,正在改变着组织进行数字创作的方式。 近期,Perforce发布了《2024游戏技术现状报告》,通过收集来自游戏、媒体与娱乐、汽车和制造业等高增长行业的从业者、管理人…

初阶数据结构之队列的实现

1 队列的定义 什么是队列呢?队列只允许在一端进行插入数据操作,在另一端进行删除数据操作。队列具有先进先出FIFO(First In First Out)的特性。 队头:删除数据的一端称为队头。 队尾:插入数据的一端称为队尾。 2 队列底层结构…

Linux ss 命令详解

简介 ss 全称 Socket Statistics,是一个用于探究 Linux 上的套接字和网络连接的强大实用程序,它被用来替代老版的 netstat ,提供更快、更详细的信息输出。 常用选项 查看所有 sockets ss -a# 显示所有监听和未监听的sockets显示监听的 so…

【C语言】连接陷阱探秘(3):形参、实参与返回值

目录 一、形参的 “迷障” 1.1. 定义与功能 1.2. 类型不匹配 1.3. 数量不一致 1.4. 顺序不一致 1.5. 数组形参退化 二、实参的 “暗礁” 2.1. 定义与功能 2.2. 求值顺序 “谜题” 2.3. 悬空指针 “深渊” 三、返回值的 “陷阱” 3.1. 定义与功能 3.2. 陷阱与缺陷 …

阿里云私服地址

1.解压apache-maven-3.6.1-bin 2.配置本地仓库&#xff1a;修改conf/dettings.xml中的<localReoisitory>为一个指定目录。56行 <localRepository>D:\apache-maven-3.6.1-bin\apache-maven-3.6.1\mvn_repo</localRepository> 3.配置阿里云私服&#xff1a;…

STM32-- 调试- 延时、编译空循环

编译对空循环的处理&#xff0c;会影响堵塞延时效果&#xff0c;具体怎么处理的还不知道&#xff0c;只知道结果和现象。 模拟串口输出字符&#xff0c;用到延时函数&#xff0c;同样的延时函数&#xff0c;会有正常和不正常输出的情况&#xff1b;具体现象如下&#xff0c; /…

小狐狸AI数字人分身声音克隆形象克隆口播口型同步SAAS系统源码

AI数字人软件系统的未来趋势和用途正朝着多模态交互和智能化方向发展。 1. **多模态交互**&#xff1a;AI数字人技术正在从单一的文本或语音交互&#xff0c;转变为更加自然的多模态交互方式&#xff0c;包括语言对话、行为互动和自主学习能力。这种技术的提升使得数字人能够更…

Idea忽略提交文件、Idea设置文件隐藏、Idea提交时隐藏部分文件、git提交时忽略文件

文章目录 一、在idea中commit文件时隐藏文件方式一&#xff1a;创建.gitignore文件&#xff08;推荐&#xff09;方式二&#xff1a;‌通过File Types设置隐藏文件方式三&#xff1a;通过Git配置忽略文件‌&#xff08;不推荐&#xff09;总结 二、可能遇到的问题2.1、.gitigno…

FastGPT 和 DiffYAI 算不算ANGENT

FastGPT 和 DiffYAI 这类应用从某种程度上来说&#xff0c;可以算是“智能体&#xff08;Agent&#xff09;”&#xff0c;但其具体性质和智能体的定义范围有关。以下是详细分析&#xff1a; 什么是智能体&#xff08;Agent&#xff09;&#xff1f; 智能体是一种能够感知环境…

ARM 架构(Advanced RISC Machine)精简指令集计算机(Reduced Instruction Set Computer)

文章目录 1、ARM 架构ARM 架构的特点ARM 架构的应用ARM 架构的未来发展 2、RISCRISC 的基本概念RISC 的优势RISC 的应用RISC 与 CISC 的对比总结 1、ARM 架构 ARM 架构是一种低功耗、高性能的处理器架构&#xff0c;广泛应用于移动设备、嵌入式系统以及越来越多的服务器和桌面…

如何使用Jest测试你的React组件

在本文中&#xff0c;我们将了解如何使用Jest&#xff08;Facebook 维护的一个测试框架&#xff09;来测试我们的React组件。我们将首先了解如何在纯 JavaScript 函数上使用 Jest&#xff0c;然后再了解它提供的一些开箱即用的功能&#xff0c;这些功能专门用于使测试 React 应…

10 —— Webpack打包模式

开发模式&#xff1a;development &#xff1b;场景&#xff1a;本地开发 生产模式&#xff1a;production &#xff1b; 场景&#xff1a;打包上线 设置&#xff1a; 方式1.webpack.config.js 配置文件设置mode选项 module.exports { mode:production }; 方式2.在packa…

健康养生点点滴滴

在当下纷扰忙碌的尘世中&#xff0c;养生宛如一支灵动的画笔&#xff0c;精心地为人们勾勒出健康生活的绚丽图景。它绝非仅是对躯体的片面保养&#xff0c;更是对精神世界的深度润泽&#xff0c;一种执着于身心交融、契合无间的生活美学。 饮食养生&#xff0c;仿若画卷中那细…

《TCP/IP网络编程》学习笔记 | Chapter 15:套接字与标准 I/O

《TCP/IP网络编程》学习笔记 | Chapter 15&#xff1a;套接字与标准 I/O 《TCP/IP网络编程》学习笔记 | Chapter 15&#xff1a;套接字与标准 I/O标准 I/O 函数标准 I/O 函数的两个优点标准 I/O 函数和系统函数之间的性能对比标准 I/O 函数的几个缺点 使用标准 I/O 函数利用 fd…

「Mac玩转仓颉内测版29」基础篇9 - 数组类型详解

本篇将介绍 Cangjie 中的数组类型&#xff0c;包括数组的定义、创建、访问、常见操作以及在数据管理中的应用&#xff0c;帮助开发者熟练掌握数组的使用。 关键词 数组类型定义数组创建数组访问数组操作应用场景 一、数组类型概述 在 Cangjie 中&#xff0c;数组是一种用于存…

[面试]-golang基础面试题总结

文章目录 panic 和 recover**注意事项**使用 pprof、trace 和 race 进行性能调试。**Go Module**&#xff1a;Go中new和make的区别 Channel什么是 Channel 的方向性&#xff1f;如何对 Channel 进行方向限制&#xff1f;Channel 的缓冲区大小对于 Channel 和 Goroutine 的通信有…

鸿蒙进阶-状态管理

大家好啊&#xff0c;这里是鸿蒙开天组&#xff0c;今天我们来学习状态管理。 开始组件化开发之后&#xff0c;如何管理组件的状态会变得尤为重要&#xff0c;咱们接下来系统的学习一下这部分的内容 状态管理机制 在声明式UI编程框架中&#xff0c;UI是程序状态的运行结果&a…

深度学习每周学习总结J6(ResNeXt-50 算法实战与解析 - 猴痘识别)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 目录 0. 总结ResNeXt基本介绍 1. 设置GPU2. 导入数据及处理部分3. 划分数据集4. 模型构建部分5. 设置超参数&#xff1a;定义损失函数&…

IDEA 2024.3 版本更新主要功能介绍

IDEA 2024.3 版本提供的新特性 IntelliJ IDEA 2024.3 的主要新特性&#xff1a; AI Assistant 增强 改进的代码补全和建议更智能的代码分析和重构建议Java 支持改进 支持 Java 21 的所有新特性改进的模式匹配和记录模式支持更好的虚拟线程调试体验开发工具改进 更新的 UI/UX 设…