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 相关文章推荐
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
javascript显示隐藏层比较不错的方法分析
Sep 30 Javascript
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
js对象数组按属性快速排序
Jan 31 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
深入理解node.js http模块
Jan 24 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
工作中常用到的ES6语法
Sep 04 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日历程序
2006/12/06 PHP
一些使用频率比较高的php函数
2008/10/03 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
python入门之井字棋小游戏
2020/03/05 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
创伤外科专业推荐信范文
2013/11/19 职场文书
会计电算化专业个人的自我评价
2013/11/24 职场文书
成考报名单位证明范本
2014/01/16 职场文书
初二物理教学反思
2014/01/29 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
实验心得体会范文
2016/01/25 职场文书
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js