前端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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
JavaScript中的细节分析
Jun 30 Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
vue一步步实现alert功能
Jul 05 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
JavaScript 中的六种循环方法
Jan 06 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
虫族 ZERG 概述
2020/03/14 星际争霸
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
简单了解python PEP的一些知识
2019/07/13 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
简历中个人自我评价分享
2014/03/15 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
岁月神偷观后感
2015/06/11 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
如何使用SQL Server语句创建表
2022/04/12 SQL Server