web前端-自定义js方法解析url

主要是借助a标签来实现, 这是一道面试题

function parseUrl(url) {
    var a = document.createElement('a')
    a.href = url;
    return {
        source: url, // 原始url
        hostname: a.hostname, // 主机名
        protocol: a.protocol.replace(':', ''), // 请求协议
        port: a.port || 80, // 端口号
        query: a.search, // 查询参数
        path: a.pathname, // 路径
        hash: a.hash, // 哈希值
        params: (() => { // 将查询参数解析成对象
            var q = a.search.substr(1)
            var kv = q.split('&')
            var obj = {}
            kv.forEach((item, index) => {
                var kvArr = item.split('=')
                var k = kvArr[0]
                var v = kvArr[1]
                obj[k] = v
            })
            return obj
        })()
    }
}
var urlObj = parseUrl('http://www.baidu.com:90/search?name=liyajie&age=12#abc#bbb')
console.log(urlObj)

打印结果如下:

hash: "#abc#bbb"
hostname: "www.baidu.com"
params:{
age: "12"
name: "liyajie",
path: "/search"
port: "90"
protocol: "http"
query: "?name=liyajie&age=12"
source:"http://www.baidu.com:90/search?name=liyajie&age=12#abc#bbb"