前端JS获取URL参数的4种方法总结


Posted in Javascript onApril 05, 2022

前言

对于前端来说,无论是在面试或者工作中都可能遇到处理 url 参数的问题,使用框架进行项目开发时或许不用,有自带的获取参数方式,但是抛开使用框架来说我们也可以使用原生 js 方式或者借用第三方库来实现参数的获取并对象化,下面就对具体用法进行介绍整理。

方法1: 字符串 split 方法

因为一个 url 地址是字符串形式的,所以利用 split 方法将参数提取出来,该方法比较常用,而且容易理解(对于不太会使用正则的我来说,haha~)

let URL = "http://www.baidu.com?name=张三&age=25&sex=男&wife=小红"
function getUrlParams(url) {
    // 通过 ? 分割获取后面的参数字符串
    let urlStr = url.split('?')[1]
    // 创建空对象存储参数
	let obj = {};
    // 再通过 & 将每一个参数单独分割出来
	let paramsArr = urlStr.split('&')
	for(let i = 0,len = paramsArr.length;i < len;i++){
        // 再通过 = 将每一个参数分割为 key:value 的形式
		let arr = paramsArr[i].split('=')
		obj[arr[0]] = arr[1];
	}
	return obj
}
console.log(getUrlParams(URL))

前端JS获取URL参数的4种方法总结

方法2: 利用 URLSearchParams 方法

在 MDN 中结合两种方法实现参数的获取:1. 使用 new URLSearchParams(url) 方法,返回一个 URLSearchParams 对象,再调用 entries() 方法返回一个可迭代对象(Iterator);2. 使用 Object.fromEntries(iterable) 方法转化为普通对象

let URL = "http://www.baidu.com?name=Jack&age=25&sex=men&wife=Lucy"
function getUrlParams2(url) {
	let urlStr = url.split('?')[1]
	const urlSearchParams = new URLSearchParams(urlStr)
	const result = Object.fromEntries(urlSearchParams.entries())
	return result
}
console.log(getUrlParams2(URL))

前端JS获取URL参数的4种方法总结

特别的:URLSearchParams 方法不仅可以获取参数,还可以将参数对象转为 字符串,详细用法可查看 MDN 中的介绍,并且该方法存在浏览器兼容性问题。

方法3: 利用正则匹配方法

正则匹配功能强大相信很多小伙伴都知道,不仅可以实现在登录注册时的账号、密码、邮箱、手机号等等的验证,还可以非常方便的处理一些字符串(校验、替换、提取等操作),难点在于对正则使用的熟练度,这里就是通过正则提取字符串中需要的字符

let URL = "http://www.baidu.com?name=Tom&friend=Jerry"
function getUrlParams3(url){
	// \w+ 表示匹配至少一个(数字、字母及下划线), [\u4e00-\u9fa5]+ 表示匹配至少一个中文字符
	let pattern = /(\w+|[\u4e00-\u9fa5]+)=(\w+|[\u4e00-\u9fa5]+)/ig;
	let result = {};
	url.replace(pattern, ($, $1, $2)=>{
		result[$1] = $2;
	})
	return result
}
console.log(getUrlParams3(URL))

前端JS获取URL参数的4种方法总结

方法4: 使用第三方库 qs

使用第三方库 qs 也可以实现 url 中参数字符的提取,还能实现将参数对象转为 url 参数形式,需要注意的是浏览器 cdn 方式引入时是默认添加到全局对象 window 的 Qs 属性上的

<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.3/qs.min.js"></script>
<script>
let URL = "http://www.baidu.com?product='iPhone 13 Pro'&price=¥9999.00"
function getUrlParams4(url){
	// 引入 qs 库时会默认挂在到全局 window 的 Qs 属性上
	// console.log(window)
	let urlStr = url.split('?')[1]
	let result = Qs.parse(urlStr)
	// 拼接额外参数
	let otherParams = {
		num:50,
		size:6.1
	}
	let str = Qs.stringify(otherParams)
	let newUrl = url + str
	return {result,newUrl}
}
console.log(getUrlParams4(URL))
</script>

前端JS获取URL参数的4种方法总结

总结:

到此这篇关于前端JS获取URL参数的4种方法的文章就介绍到这了,更多相关前端获取URL参数内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript之大字符串的连接的StringBuffer 类
May 08 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
threejs太阳光与阴影效果实例代码
JS实现数组去重的11种方法总结
Apr 04 #Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 #Vue.js
JavaScript模拟实现网易云轮播效果
Javascript中Microtask和Macrotask鲜为人知的知识点
vue中div禁止点击事件的实现
Apr 02 #Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 #Vue.js
You might like
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
JavaScript手机振动API
2016/06/11 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
python实现维吉尼亚加密法
2019/03/20 Python
python设置环境变量的原因和方法
2019/06/24 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
工业设计专业自荐书
2014/06/05 职场文书
领导班子四风表现材料
2014/08/23 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
python使用torch随机初始化参数
2022/03/22 Python