JavaScript获取URL参数的方法分享


Posted in Javascript onApril 07, 2022

一、字符串 split 方法

url 地址是字符串形式的,所以利用 split 方法将参数提取出来,该方法比较常用,而且容易理解(无关正则)

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));

JavaScript获取URL参数的方法分享

二、使用 URLSearchParams 方法

1、解析搜索字符串

let url = 'https://www.baidu.com/s?ie=UTF-8&wd=%E8%AE%B8%E5%96%84%E7%A5%A5&p=1';
let urlStr = url.split('?')[1];
const params = new URLSearchParams(urlStr);
console.log(params.get('k'));   // 返回字符串“许善祥”,支持自动 UTF-8 解码
console.log(params.get('p'));   // 返回字符串“1”
console.log(params.get('xxx')); // 如果没有 xxx 这个键,则返回 null
console.log(params.has('xxx')); // 当然也可以通过 has() 方法查询是否存在指定的键
console.log(params.keys());     // 返回一个 ES6 Iterator,内含 ['k', 'p']
console.log(params.values());   // 返一个 ES6 Iterator,内含 ['许善祥', '1']
console.log(params.entries());  // 与 Map.prototype.entries() 类似

2、生成搜索字符串

const params = new URLSearchParams();
params.set('k', '许善祥');       // 设置参数
params.set('p', 1);             // 支持 Boolean、Number 等丰富类型
console.log(params.toString()); // k=%E8%AE%B8%E5%96%84%E7%A5%A5&p=1

3、Node.js 代码

const { URLSearchParams } = require('url');

const urlSearchParams = new URLSearchParams();

三、使用正则匹配方法

正则匹配功能强大,不仅可以实现在登录注册时的账号、密码、邮箱、手机号等验证(看这里),还可以非常方便的处理一些字符串(校验、替换、提取等操作)。

let URL = 'http://www.baidu.com?name=祥&friend=宇';
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));
// {name: '祥', friend: '宇'}

四、使用第三方库 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?name=祥&friend=宇';
function getUrlParams4(url) {
    // 引入 qs 库时会默认挂在到全局 window 的 Qs 属性上
    // console.log(window);
    let urlStr = url.split('?')[1];
    let result = Qs.parse(urlStr);
    // 拼接额外参数
    let otherParams = {
        homepage: 'xushanxiang.com'
    };
    let str = Qs.stringify(otherParams);
    let newUrl = url + str;
    return {result, newUrl};
}
console.log(getUrlParams4(URL));

JavaScript获取URL参数的方法分享

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

Javascript 相关文章推荐
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
js星星评分效果
Jul 24 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
微信小程序select下拉框实现源码
Nov 08 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 #Javascript
Axios代理配置及封装响应拦截处理方式
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 #Vue.js
动态规划之使用备忘录来改进Javascript函数
Apr 07 #Javascript
vue实现拖拽交换位置
Apr 07 #Vue.js
使用Ajax实现进度条的绘制
You might like
一个PHP的QRcode类与大家分享
2011/11/13 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
初识ThinkPHP控制器
2016/04/07 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
JS解析XML实例分析
2015/01/30 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
在Django中创建动态视图的教程
2015/07/15 Python
itchat接口使用示例
2017/10/23 Python
python实现随机漫步算法
2018/08/27 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
通过cmd进入python的实例操作
2019/06/26 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
公司司机岗位职责
2014/02/07 职场文书
最常使用的求职信
2014/05/25 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
面试通知短信
2015/04/20 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS