JavaScript解析url为对象

JavaScript解析url为对象的方法有好多，例如正则，split等等，今天就用split来写

1.首先，要先了解split的使用规则,MDN上是这样定义split的

2.什么是url

url即统一资源定位符，
一般由4部分组成：协议、主机、端口、路径，
语法格式：protocol :// hostname[:port] / path / [;parameters][?query]#fragmen

例如：https://csdn:443?name=fvz&age=21&job=fontend

3.如何切割字符串或数组

首先把字符串按照？切割
let url='https://csdn:443?name=fvz&age=21&job=fontend'
arr=url.split('?') 结果为 [ 'https://csdn:443', 'name=fvz&age=21&job=fontend' ]

然后把数组下标为1的按照&进行切割
arr=arr[1].split('&')
结果为 [ 'name=fvz', 'age=21', 'job=fontend' ]

再把上一步的结果按照=切割
arr.split('=')
结果为
[ 'name', 'fvz' ]
[ 'age', '21' ]
[ 'job', 'fontend' ]

此时发现结果与对象的键值对形式有点类似了。

4.存入对象

定义一个空对象
let obj={}
把键值对一次放入对象中
obj[i[0]]=i[1]

5.完整代码

var parseUrl=function(url){
    var obj={}  //定义的空对象，用来存放结果
    arr=url.split("?") 
    if(arr.length<=1){
        return obj;
    }
    arr=arr[1].split('&')
    console.log(arr);
    for(var i=0;i<arr.length;i++){ //按照循环依次放入对象中
        var a=arr[i].split('=')
        obj[a[0]]=a[1]
    }
    return obj
}
console.log(parseUrl('https://csdn:443?name=fvz&age=21&job=fontend'));

结果