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>標籤，由於咱們常常訪問頁面地址是經過點擊a連接跳轉的，那麼可否經過它來解析 url 呢？

咱們建立了一個a元素，並給它的href賦值了 url ，能夠打印出這個a元素的對象，其中就包括 url 的這些屬性。

而且能夠利用它簡單判斷一個 url 是不是合法的，不合法的 url，host, origin爲null

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...