前端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('参数名')

在这里插入图片描述

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

在这里插入图片描述

好,就先这样

目录
相关文章
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
430 63
|
JavaScript 前端开发 索引
JavaScript获取url网址中域名后面的部分
如何截取 url 中网站域名之后的部分,需要用到以下几个方法:
428 3
|
存储 开发框架 JavaScript
Node.js实现短链接(ShortLink):shortid、epxress让URL更简单
Node.js实现短链接(ShortLink):shortid、epxress让URL更简单
691 0
Node.js实现短链接(ShortLink):shortid、epxress让URL更简单
|
JavaScript 前端开发 Python
JavaScript写个.ts视频文件Url生成器,使用了string.padStart
JavaScript写个.ts视频文件Url生成器,使用了string.padStart
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
371 5
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
|
XML 前端开发 JavaScript
2022 前端JavaScript高频手写面试题大全,助你查漏补缺
2022 前端JavaScript高频手写面试题大全,助你查漏补缺
149 1
2022 前端JavaScript高频手写面试题大全,助你查漏补缺
|
存储 消息中间件 编解码
前端面试题——JS篇】
前端面试题——JS篇】
161 1

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1020
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    432
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    341
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    324
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    438
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    618
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    860
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    230
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    705
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    398
  • 下一篇
    开通oss服务