url字符串解析

众所周知，我们可以通过 location 获得当前页面地址（URL）的 href 、 protocol 、 host 、 search 、 hash 等属性，但是如果给你一个 url字符串 ，怎么得到这些属性呢？也许用正则是一个方法。

假设有这样一个 url 字符串 "https://demo.vczhan.com/wave/heart-wave.html?name=abc&age=18#part" ，该怎么解析它呢。

iframe

直接把url赋值给 location.href 会从当前页面跳转到 url 的页面，如果我们在当前页面新建一个 iframe 并给它的 src 赋值这个 url ，似乎可以通过iframe的 window.location 拿到url的各个属性。

但是很遗憾，对于 跨域的url ，不会触发iframe的 window.onload ，直接访问 location.href ，浏览器也给出提示限制跨域。

a

URL

利用 a 元素来解析 url 算是奇淫巧技吧，其实现代浏览器提供了一个创建的 URL对象 的构造函数— URL() ，直接把 url 当作参数传入，就会返回一个 URL对象 。

返回的 URL对象 有个 searchParams 属性，可以对 url 的 search 部分解析，再也不需要用循环或正则方式获取 search 对象。

var url = 'https://demo.vczhan.com/wave/heart-wave.html?name=abc&age=18#part'
var searchParams = new URL(url).searchParams
searchParams.get('name') // abc
searchParams.has('age')  // 18

当然，有个专门处理 search 的API： URLSearchParams

// {a: 1, b: 2} -> a=1&b=2
new URLSearchParams({a: 1, b: 2}).toString()


// a=1&b=2 -> {a: "1", b: "2"}
var obj ={}
var searchParams = new URLSearchParams('?a=1&b=2')

// searchParams.has('a') // true
// searchParams.get('a') // 1
// searchParams.append('c', '3'); searchParams.toString() // "a=1&b=2&c=3"

for(var [key, value] of searchParams.entries()) {
   obj[key] = value
}
console.log(obj)

更详细的请参考下方链接

URL： https://developer.mozilla.org...

URLSearchParams： https://developer.mozilla.org...