【JS面试题】提取URL中?以后的GET参数

提取URL中?以后的GET参数，以对象的形式输出

• 法一：url是当前窗口的网址时，利用BOM里的location来封装
• 法二：给定的是自定义好的字符串，不是当前窗口的url

提取GET参数，以对象的形式打包输出
例子：https://editor.csdn.net/md?name=milk&age=22&sex=boy&g
输出为：{name:“milk”,age:“22”,sex:“boy”,g=undefined};

法一：url是当前窗口的网址时，利用BOM里的location来封装

location.href：url里面所有的元素

"https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%A4%B1%E8%B8%AA%E9%81%87%E5%AE%B3%E5%A5%B3%E5%AD%90%E4%B8%88%E5%A4%AB%E8%A2%AB%E6%8A%93%E5%89%8D%E6%9C%80%E5%90%8E%E7%94%BB%E9%9D%A2&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1"

location.search：url里从？开始到最后的所有元素

"?cl=3&tn=baidutop10&fr=top1000&wd=%E5%A4%B1%E8%B8%AA%E9%81%87%E5%AE%B3%E5%A5%B3%E5%AD%90%E4%B8%88%E5%A4%AB%E8%A2%AB%E6%8A%93%E5%89%8D%E6%9C%80%E5%90%8E%E7%94%BB%E9%9D%A2&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1"

location.protocol：https/http

"https:"

location.host：当前 URL 的主机名称和端口号

"www.baidu.com"

location.hostname：主机号

"www.baidu.com"

location.port：端口号

""

location.pathname：相对路径

"/s"

location.hash：锚点

""

利用location.search来解答：

var search = location.search;

var obj = {};

if(search != 0){

	var splits = search.slice("1").split("&");
	
	for(var i=0;i<splits.length;i++){
		
	  var arr = splits[i].split("=");
		
	  obj[arr[0]] = arr[1];
		
	}
}
console.log(obj)

效果：

法二：给定的是自定义好的字符串，不是当前窗口的url

var str = 'https://editor.csdn.net/md?name=milk&age=22&sex=boy&g;'

function serilizeUrl(url){
    var result = {};
    
    url = url.split("?")[1];
    
    var map = url.split("&");
    
    for(var i = 0,len = map.length; i < len; i++) {
       result[map[i].split("=")[0]] = map[i].split("=")[1];
    }
    
    return result;
 }
console.log(serilizeUrl(str))

结果：