解析url的查询部分,生成对应的JSON对象

我们知道在于服务器交互过程中,get和post是最重要的两种方式,在get方式下,我们通常会见到一大串网址信息,而这些信息是什么呢,有时候我们需要拿到它并进行分析

好了,我百度主页输入CSDN,搜索结果呈现给我们后,网址栏出现如下一串东西

https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=csdn&rsv_pq=fdfd3c990005f0f7&rsv_t=cc0d6AGGoE2h1vZAcxlSMkTQA%2FVYgp0AwoTeWrt3kQ6Y9PzLYMnnMII%2BUPY&rqlang=cn&rsv_enter=1&rsv_sug3=4&rsv_sug1=3&rsv_sug7=100

除了前面的百度主页,后面这些是什么呢,我打开浏览器控制台,通姑window.location查询


细心的同志可能会发现,后面这一大串就是location对象的search属性

我们输入window.location.search

浏览器还是丢给我们这串不知所云的东西,细看一下又好像很多键值对和连接符号组成,我们能不能把它解析成更直观的JSON对象来看呢,很显然是可以的

看下面代码

			var url=window.location.search;
			var rep=/[?&][^?&]+=[^?&]+/g;//全局匹配所有"?"和“&”后面的键值对
			var arr=url.match(rep);//执行匹配操作,返回键值对数组
			console.log(arr);
再执行一下

好了,丢给我们这串数组,这次清楚一些了,不过还有“?”和“&”连接符存在,没有形成我们想要的JSON对象

接下来完善一下代码

	var url=window.location.search;
            var rep=/[?&][^?&]+=[^?&]+/g;//全局匹配所有"?"和“&”后面的键值对
            var arr=url.match(rep);//执行匹配操作,返回键值对数组
            //console.log(arr);
            var obj={};
            if(arr){
                arr.forEach(function(item){
                    var tempArr = item.substring(1).split('=');
                    var key = tempArr[0];
                    var val = tempArr[1];
                    obj[key] = val;
                })
            }
            console.log(obj);
这次我百度我女神高圆圆,丢进程序看什么结果


好,基本得到我们想要的结果,里面有字符编码,上一次的访问记录等等东西,这样就完成了吗,怎么没见与女神任何相关的东西,别急,接下来见证奇迹

js为我们提供了一个专门编译URI的decodeURIComponent函数(全局函数),decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

我猜测这里面有被编码过的信息,接下来解码试试

我代码是这样写的

var url=window.location.search;
			var rep=/[?&][^?&]+=[^?&]+/g;//全局匹配所有"?"和“&”后面的键值对
			var arr=url.match(rep);//执行匹配操作,返回键值对数组
			//console.log(arr);
			var obj={};
			if(arr){
				arr.forEach(function(item){
					var tempArr = item.substring(1).split('=');
			        var key = decodeURIComponent(tempArr[0]);
			        var val = decodeURIComponent(tempArr[1]);
			        obj[key] = val;
				})
			}
			console.log(obj);
运行


哈哈,果不其然,女神找到,这世界好神奇~

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值