hugh 的个人博客

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