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"

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 164,062评论 24 696
  • 史上最全的iOS面试题及答案 iOS面试小贴士———————————————回答好下面的足够了----------...
    Style_伟阅读 1,997评论 0 35
  • 一看到《额尔古纳河右岸》这本书的时候,我感到非常困惑——为什么要写成额尔古纳河“右岸”呢?直到看完这本书我才明白,...
    玉山红叶稀阅读 416评论 3 6
  • 今天在魔都上海,雷佳音当众宣布要和佟丽娅“同居”了!!这到底怎么回事,快跟着姐走一波儿~ 安啦安啦,原来是由徐峥担...
    娱乐拆穿姐阅读 163评论 0 1