前端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调用后台servlet方法实例
Jun 09 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
微信小程序App生命周期详解
Jan 31 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
vue prop属性传值与传引用示例
Nov 13 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 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将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
深入理解js中this的用法
2016/05/28 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
python 定时修改数据库的示例代码
2018/04/08 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
python实现银行管理系统
2019/10/25 Python
使用Python封装excel操作指南
2021/01/29 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
服装设计师职业生涯规划范文
2014/02/28 职场文书
校园活动宣传方案
2014/03/28 职场文书
爱国演讲稿400字
2014/05/07 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
python3 sqlite3限制条件查询的操作
2021/04/07 Python