前端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 相关文章推荐
js 省地市级联选择
Feb 07 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
JS实现数组去重复值的方法示例
Feb 18 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 Javascript
js动态生成表格(节点操作)
Jan 12 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伪静态写法附代码
2008/06/20 PHP
php实现加减法验证码代码
2014/02/14 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
Python正则捕获操作示例
2017/08/19 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
测试工程师岗位职责
2013/11/28 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
围城读书笔记
2015/06/26 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle