前端JS截取url上的参数

简介: 文章介绍了两种前端JS获取URL参数的方法:手动截取封装和使用URLSearchParams。

1、手动截取封装

下面这个方法是自己封装的一个获取url上参数的方法:

 function getUrlParams(url = location.href) {
   
      let urlStr = url.split('?')[1] || ''
      let obj = {
   };
      let paramsArr = urlStr.split('&')
      for (let i = 0, len = paramsArr.length; i < len; i++) {
   
        const num = paramsArr[i].indexOf('=')
        let arr = [paramsArr[i].substring(0, num), paramsArr[i].substring(num + 1)]
        obj[arr[0]] = arr[1];
      }
      return obj
    }

直接使用的可以返回一个对象,里面包含我们url上的参数,key和对应value值。

getUrlParams('https://blog.csdn.net/qq_43291759?type=blog&aaa=123&bbb===456&ccc=789')
//得到
{
   type: 'blog', aaa: '123', bbb: '==456', ccc: '789'}

使用的时候我们直接解构出来或者点出来使用即可。
在这里插入图片描述
getUrlParams上面的循环在使用=分割,为什么要找到第一等号的位置然后再次截取,是因为有的参数可能拼接了等于,或者是说这个对应的值是一个奇怪的字符串。

getUrlParams('https://blog.csdn.net/qq_43291759?type=blog&aaa=123&bbb===456&ccc=789&ddd=123=456=789')
//执行结果
{
   type: 'blog', aaa: '123', bbb: '==456', ccc: '789', ddd: '123=456=789'}

其实我们想要的ddd结果为123=456=789这才是正确的,如果不取第一个等号去进行分割,这肯定是拿不到我们想要的结果的。
在这里插入图片描述

2、URLSearchParams

let ParamsPage = new URLSearchParams(location.search)
ParamsPage.get('参数名')

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

好,就先这样

目录
相关文章
|
3月前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
1月前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
41 7
|
1月前
|
JavaScript 前端开发 索引
JavaScript获取url网址中域名后面的部分
如何截取 url 中网站域名之后的部分,需要用到以下几个方法:
85 3
|
2月前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
127 1
|
2月前
|
存储 开发框架 JavaScript
Node.js实现短链接(ShortLink):shortid、epxress让URL更简单
Node.js实现短链接(ShortLink):shortid、epxress让URL更简单
75 0
Node.js实现短链接(ShortLink):shortid、epxress让URL更简单
|
2月前
|
JSON 前端开发 数据格式
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
文章详细讲解了在SpringMVC中如何使用`@RequestMapping`进行路由映射,并介绍了前后端参数传递的多种方式,包括传递单个参数、多个参数、对象、数组、集合以及JSON数据,并且涵盖了参数重命名和从URL中获取参数的方法。
205 0
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
|
3月前
|
JavaScript 前端开发 Python
JavaScript写个.ts视频文件Url生成器,使用了string.padStart
JavaScript写个.ts视频文件Url生成器,使用了string.padStart
|
4月前
|
开发框架 前端开发 .NET
Asp.net Webapi 的 Post 方法不能把参数加到 URL 中?试试这样写
Asp.net Webapi 的 Post 方法不能把参数加到 URL 中?试试这样写
|
4月前
|
Java
JAVA 获取 URL 指定参数的值
JAVA 获取 URL 指定参数的值
51 0
|
5月前
|
JavaScript 前端开发 数据格式
URL编码【详解】——Javascript对URL进行编码解码的三种方式的区别和使用场景,axios请求拦截器中对get请求的参数全部进行URL编码
URL编码【详解】——Javascript对URL进行编码解码的三种方式的区别和使用场景,axios请求拦截器中对get请求的参数全部进行URL编码
306 0
下一篇
DataWorks