9

众所周知,我们可以通过location获得当前页面地址(URL)的hrefprotocolhostsearchhash等属性,但是如果给你一个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 是否是合法的,不合法的 urlhost, originnull
图片描述

URL

利用a元素来解析 url 算是奇淫巧技吧,其实现代浏览器提供了一个创建的URL对象的构造函数—URL(),直接把url当作参数传入,就会返回一个URL对象
图片描述
返回的URL对象有个searchParams属性,可以对 urlsearch部分解析,再也不需要用循环或正则方式获取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...


vczhan
2.6k 声望514 粉丝