金色小芝麻

vuePress-theme-reco 金色小芝麻    2021 - 2023
金色小芝麻 金色小芝麻

Choose mode

  • dark
  • auto
  • light
主页
分类
  • JavaScript
  • BUG复盘
  • SVG笔记
  • TypeScript
  • 个人总结
  • CSS笔记
  • 开发工具
  • 前端入门
  • Vue2.0
  • 性能优化
  • 架构学习
  • 每日一题
标签
时间轴
社交
  • 掘金 (opens new window)
author-avatar

金色小芝麻

83

文章

27

标签

主页
分类
  • JavaScript
  • BUG复盘
  • SVG笔记
  • TypeScript
  • 个人总结
  • CSS笔记
  • 开发工具
  • 前端入门
  • Vue2.0
  • 性能优化
  • 架构学习
  • 每日一题
标签
时间轴
社交
  • 掘金 (opens new window)
  • 前端入门

    • 博客搭建过程及相关配置
    • 数组中的16种常用方法
    • JS中的数据类型简析——基本数据类型值
    • JS中的数据类型object基础
    • JS中三种常见的判断
    • 数据类型之间的区别(堆内存Heap VS 栈内存Stack)
    • JS基础练习题及解析
    • 开关灯的小案例
    • JS中数据类型检测方法——typeof
    • 条件判断几个小练习
    • JS循环——for循环
    • 自定义属性实现选项卡小案例
    • 字符串中的12种常用方法
    • DOM操作的简单原理
    • JS实现隔行变色鼠标跟随小案例
    • JS中function的基础知识
    • JS中数组去重的三种方法
    • JS中时间格式化的三种方法
    • JS中URL参数处理的三种方法
    • JS小案例——获取随机验证码
    • DOM操作之——获取DOM标签的9种方式
    • DOM操作之——DOM节点类型及属性
    • DOM操作之——元素的增删改、样式修改、插入内容
    • JS中THIS相关问题梳理
    • JS中的变量提升机制
    • 在全局:私有上下文中:带VAR和不带VAR的区别
    • 作用域和作用域链查找机制
    • JS中堆栈内存的释放问题
    • JS中的闭包机制
    • ES3和ES6定义变量的区别
    • JS中的单例和工厂设计模式
    • JS中的面向对象OOP理论基础
    • 构造函数创建自定义类
    • JS中的原型和原型链
    • Math中常用的9种方法
    • 从一道阿里经典面试题剖析函数三种角色
    • 重写内置call
    • 重写一个内置new
    • 浏览器渲染页面的主体流程
    • 减少DOM的回流和重绘
    • JS中的多种继承方式
    • JS中数据类型检测四种方式的优缺点
    • JS中的正则表达式&&全面梳理
    • 非严格模式 🆚 严格模式的区别
    • 数组方法reduce、filter、flat
    • 获取数组中最大值/最小值的三种基础方法
    • 轮播图——渐隐渐显版
    • 深克隆 VS 浅克隆|深比较 VS 浅比较|回调函数
    • 轮播图——左右切换版
    • 事件及事件绑定、事件对象及事件传播
    • 从在地址栏输入网址到看到页面的过程&&AJAX基础
    • 想自学JS吗?想提升JS底层原理吗?76张脑图带你彻底搞懂原生JS
    • 面试手写API系列
    • 30张脑图带你从零开始学VUE
    • JS中的盒子模型
    • 初识JS-基础中的基础
    • 前端发展简史
    • JS中的三大类输出方式

JS中URL参数处理的三种方法

vuePress-theme-reco 金色小芝麻    2021 - 2023

JS中URL参数处理的三种方法

金色小芝麻 2020-04-25

# 需求:

queryURLParams:获取地址栏中问号传参的信息

  • 'http://www.xxxxxxx.cn/?lx=1&name=JS&from=baidu#video'
  • 解析问号和井号后面的值,最后得到一个包含信息的对象
    • {HASH: "video", lx: "1", name: "JS", from: "baidu"}

# 一、常规正则处理

(proto => {
	function queryURLParams() {
		let obj = {};
		this.replace(/([^?=&#]+)=([^?=&#]+)/g, (_, key, value) => obj[key] = value);
		this.replace(/#([^?=&#]+)/g, (_, hash) => obj['HASH'] = hash);
		return obj;
	}
	proto.queryURLParams = queryURLParams;
})(String.prototype);

console.log('http://www.xxxxxxx.cn/?lx=1&name=JS&from=baidu#video'.queryURLParams());

# 二、利用A标签内置方法

原理:利用a标签本身的内置属性

  • 在JS中获取的A元素对象,包含很多内置属性,我们可以看到如下几个属性,存储对于HREF地址的解析:
    • search:'?lx=1&name=JS&from=baidu',
    • hash:'#video',
    • host:'www.xxxxxxx.cn',
    • ......

利用这些属性信息我们就可以轻松完成需求;

function queryURLParams(url) {
	// 1.创建A标签(A元素对象)来获取到问号参数和哈希值
	let link = document.createElement('a');
	link.href = url;
	let askText = link.search.substr(1),
		polText = link.hash.substr(1),
		obj = {};
	// 2.向对象中进行存储
	polText ? obj['HASH'] = polText : null;
	if (askText) {
		let arr = askText.split(/(?:&|=)/g); //=>同时按照两个字符来拆分:["lx", "1", "name", "JS", "from", "baidu"]
		for (let i = 0; i < arr.length; i += 2) {
			// console.log(arr[i], arr[i + 1]); 属性名和属性值
			obj[arr[i]] = arr[i + 1];
		}
	}
	return obj;
}
let result = queryURLParams('http://www.xxxxxxx.cn/?lx=1&name=JS&from=baidu#video');
console.log(result);

/* <a href="http://www.xxxxxxx.cn/?lx=1&name=JS&from=baidu#video" id="link">*/

# 三、利用字符串内置方法

原理:利用字符串indexOf检测索引位置,substring截取字符串,split按指定符号转为数组...等一系列的字符串内置方法完成需求;

function queryURLParams(url) {
	// 1.首选获取问号和井号后面的值
	let askIndex = url.indexOf('?'),
		polIndex = url.lastIndexOf('#');
	let askText = url.substring(askIndex + 1, polIndex),
		polText = url.substring(polIndex + 1);
	// console.log(askText, polText); //=>"lx=1&name=JS&from=baidu"  "video"

	// 2.把获取到的结果进行解析,最后拼成一个对象返回
	let obj = {};
	// 处理哈希值(井号后面的值)
	polText.length > 0 ? obj['HASH'] = polText : null;
	// 问号参数的处理
	if (askText) {
		// askText.split('&') =>["lx=1","name=JS","from=baidu"]
		askText.split('&').forEach(item => {
			// item:循环数组中的每一项
			let arr = item.split('='), //=>"lx=1" => ["lx",1]
				key = arr[0],
				value = arr[1];
			obj[key] = value;
		});
	}
	return obj;
}
  • 另一种思路
function queryURLParams(url) {
	let askIndex = url.indexOf('?'),
		polIndex = url.lastIndexOf('#'),
		askText = '',
		polText = '';
	polIndex === -1 ? polIndex = url.length : null;
	polText = url.substring(polIndex + 1);
	if (askIndex > -1) {
		askText = url.substring(askIndex + 1, polIndex);
	}
	let obj = {};
	polText.length > 0 ? obj['HASH'] = polText : null;
	if (askText) {
		askText.split('&').forEach(item => {
			let arr = item.split('=');
			obj[arr[0]] = arr[1];
		});
	}
	return obj;
}

# 思维导图

欢迎来到 金色小芝麻
看板娘