1. URL对象

    url = new URL(url, [base])
    

     

    案例

    var url_0 = new URL("/test/a", "http://blog.uproject.cn")
    var url_1 = new URL("http://blog.uproject.cn/test/a?p=1#/abc")
    //host: "blog.uproject.cn"
    //hostname: "blog.uproject.cn"
    //origin: "http://blog.uproject.cn"
    //password: ""
    //pathname: "/test/a"
    //port: ""
    //protocol: "http:"
    //search: ""
    //searchParams: URLSearchParams {}
    //username: ""
    //hash: "#/abc"
    //href: "http://blog.uproject.cn/test/a?p=1#/abc"
    //search: "?p=1"

    配合 URLSearchParams

    var url = new URL('https://blog.uproject.cn?foo=1&bar=2');
    
    var params = new URLSearchParams(url.search);
    
    console.log(params.get("foo")) // 1

     

    注: ie11及以下不支持

    2. 使用a标签

     function _resolveUrl(url) {
        const link = document.createElement('a');
        link.href = url;
        for(let i in link) { console.log(i + "=" +link[i])}
    }
    _resolveUrl("http://uproject.cn/a?p=1#/a/d")
    // 包含以下属性
    //href=http://uproject.cn/a?p=1#/a/d
    // origin=http://uproject.cn
    // protocol=http:
    // username=
    // password=
    // host=uproject.cn
    // hostname=uproject.cn
    // port=
    // pathname=/a
    // search=?p=1
    // hash=#/a/d

    注: 测试chrome支持,其他浏览器未测试, 建议使用时通过属性鉴别是否支持

     

    3.使用正则解析

    详见解析URL