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

在这里插入图片描述

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

在这里插入图片描述

好,就先这样

目录
相关文章
|
1天前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
9 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
2天前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
10 2
前端JS读取文件内容并展示到页面上
|
5天前
|
JavaScript 前端开发 开发者
基于Vue.js的前端框架有哪些?
Vue.js 是一款流行的前端 JavaScript 框架,用于构建单页面应用(SPA)。除了 Vue.js 本身,还有许多基于 Vue.js 的前端框架和 UI 库,它们提供了更多的功能和组件,以便开发者能够快速构建应用程序。
15 6
|
14天前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
31 3
|
1天前
|
前端开发 JavaScript
前端JS控制网页复制粘贴
前端JS控制网页复制粘贴
|
4月前
uView queryParams 对象转URL参数
uView queryParams 对象转URL参数
54 0
|
1月前
|
开发框架 前端开发 .NET
Asp.net Webapi 的 Post 方法不能把参数加到 URL 中?试试这样写
Asp.net Webapi 的 Post 方法不能把参数加到 URL 中?试试这样写
|
1月前
|
Java
JAVA 获取 URL 指定参数的值
JAVA 获取 URL 指定参数的值
36 0
|
2月前
|
JavaScript 前端开发 数据格式
URL编码【详解】——Javascript对URL进行编码解码的三种方式的区别和使用场景,axios请求拦截器中对get请求的参数全部进行URL编码
URL编码【详解】——Javascript对URL进行编码解码的三种方式的区别和使用场景,axios请求拦截器中对get请求的参数全部进行URL编码
88 0
|
2月前
|
JavaScript
js 获取并解析 url 中参数的三种方法
js 获取并解析 url 中参数的三种方法
39 0