url字符串剖析

2019年9月1日 204次阅读 来源: vczhan

尽人皆知，我们能够经由过程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字符串剖析》
然则很遗憾，关于跨域的url，不会触发iframe的window.onload，直接接见location.href，浏览器也给出提醒限定跨域。

a

提到 url ，可能会有人想到<a>标签，由于我们常常接见页面地点是经由过程点击a链接跳转的，那末可否经由过程它来剖析 url 呢？
《url字符串剖析》
我们建立了一个a元素，并给它的href赋值了 url ，能够打印出这个a元素的对象，其中就包含 url 的这些属性。
《url字符串剖析》
而且能够应用它简朴推断一个 url 是不是是正当的，不正当的 url，host, origin为null
《url字符串剖析》

URL

应用a元夙来剖析 url 算是奇淫巧技吧，实在当代浏览器供应了一个建立的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…

    原文作者：vczhan
    原文地址: https://segmentfault.com/a/1190000019056856
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞