使用js获取url中的参数并返回一个对象方式
更新时间：2023年01月17日 09:27:02 作者：Lmx!
这篇文章主要介绍了使用js获取url中的参数并返回一个对象方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
js获取url中的参数并返回一个对象
今天写一个原生的html需要进行url的参数提取，为了方便以后用到时直接用将这个方法记录在此。
思路
使用window.loaction.href获取到当前页面的链接，然后对这个url字符串进行处理。
这些处理的前提是你要了解url，url由协议、域名、路径、查询字符串等组成。
我们要提取得参数也就是查询字符（qurey）是连接在？后面的键值对且用&符合分割。
我们处理要做的事情就是将这些键值对提取出来并组装成对象。
function getUrlParams(url){
const Params = {}
if(url.indexOf('?')>0){//判断是否有qurey
let parmas = url.slice(url.indexOf('?')+1)//截取出query
const paramlists = parmas.split('&')//分割键值对
for (const param of paramlists) {
let a = param.split('=')
Object.assign(Params,{[a[0]]:a[1]})//将键值对封装成对象
}
}
return Params
}js解析url中的参数——返回对象
需求
在同域的不同前端页面跳转或者不同域前端页面跳转时，可以通过参数传递一些数据，比如下面我们在某度搜索“location.search”:
- 输入：一个包含参数的URL地址
- 输出：一个含有所有参数的对象
代码
目前有两种解决方案
方案1
const getURLParameters = url =>
url.match(/([^?=&]+)(=([^&]*))/g)
.reduce((a, v) => (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {}
);效果
方案2（更易懂一些）
const parseQueryString = url=>{
var json = {};
var arr = url.substr(url.indexOf('?') + 1).split('&');
arr.forEach(item=>{
var tmp = item.split('=');
json[tmp[0]] = tmp[1];
});
return json;
}效果
一点思路
灵活运用浏览器自带的location属性 可以节省数据传递的复杂度
又：一些保密性强的参数，建议使用https域名或者其他加密方式传递。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JSX在render函数中的应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要给大家介绍了关于如何利用原生JS实现触摸滑动监听事件的相关资料,文中将实现的原理以及代码介绍的非常详细,需要的朋友可以参考下2021-06-06
这篇文章主要为大家详细介绍了Openlayers绘制地图标注，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
关于递归运算的顺序测试代码，需要的朋友可以参考下。2011-11-11
js设置控件的隐藏与显示，设置控件style的display和visibility属性就可以了，下面有个示例，需要的朋友可以参考下2014-08-08
JS向上取整、向下取整、四舍五入、取绝对值、取较大较小值及随机数代码示例
在Js中对数值进行操作的场景有,向上取整、向下取整、四舍五入、固定精度、固定长度、取整,这篇文章主要给大家介绍了关于JS向上取整、向下取整、四舍五入、取绝对值、取较大较小值及随机数的相关资料,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了JavaScript实现多种排序算法的相关资料，包括冒泡排序、插入排序、选择排序等，感兴趣的小伙伴们可以参考一下2016-02-02
这篇文章主要为大家详细介绍了如何使用JavaScript和CSS实现炫酷算盘时钟效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包，下面与大家分享下JSON操作的相关知识2013-08-08
这篇文章主要为大家详细介绍了JavaScript计算正方形面积，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
最新评论