亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

url字符串解析

Mike617 / 499人閱讀

摘要：眾所周知，我們可以通過(guò)獲得當(dāng)前頁(yè)面地址的等屬性，但是如果給你一個(gè)字符串，怎么得到這些屬性呢也許用正則是一個(gè)方法。假設(shè)有這樣一個(gè)字符串，該怎么解析它呢。返回的對(duì)象有個(gè)屬性，可以對(duì)的部分解析，再也不需要用循環(huán)或正則方式獲取對(duì)象。

眾所周知，我們可以通過(guò)location獲得當(dāng)前頁(yè)面地址（URL）的href、protocol、host、search、hash等屬性，但是如果給你一個(gè)url字符串，怎么得到這些屬性呢？也許用正則是一個(gè)方法。

假設(shè)有這樣一個(gè) url 字符串"https://demo.vczhan.com/wave/heart-wave.html?name=abc&age=18#part"，該怎么解析它呢。

iframe

直接把url賦值給location.href會(huì)從當(dāng)前頁(yè)面跳轉(zhuǎn)到 url 的頁(yè)面，如果我們?cè)诋?dāng)前頁(yè)面新建一個(gè)iframe并給它的src賦值這個(gè) url ，似乎可以通過(guò)iframe的window.location拿到url的各個(gè)屬性。

但是很遺憾，對(duì)于跨域的url，不會(huì)觸發(fā)iframe的window.onload，直接訪(fǎng)問(wèn)location.href，瀏覽器也給出提示限制跨域。

a

提到 url ，可能會(huì)有人想到標(biāo)簽，因?yàn)槲覀兘?jīng)常訪(fǎng)問(wèn)頁(yè)面地址是通過(guò)點(diǎn)擊a鏈接跳轉(zhuǎn)的，那么能否通過(guò)它來(lái)解析 url 呢？

我們創(chuàng)建了一個(gè)a元素，并給它的href賦值了 url ，可以打印出這個(gè)a元素的對(duì)象，其中就包括 url 的這些屬性。

并且可以利用它簡(jiǎn)單判斷一個(gè) url 是否是合法的，不合法的 url，host, origin為null

URL

利用a元素來(lái)解析 url 算是奇淫巧技吧，其實(shí)現(xiàn)代瀏覽器提供了一個(gè)創(chuàng)建的URL對(duì)象的構(gòu)造函數(shù)—URL()，直接把url當(dāng)作參數(shù)傳入，就會(huì)返回一個(gè)URL對(duì)象。

返回的URL對(duì)象有個(gè)searchParams屬性，可以對(duì) url 的search部分解析，再也不需要用循環(huán)或正則方式獲取search對(duì)象。

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

當(dāng)然，有個(gè)專(zhuān)門(mén)處理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)

更詳細(xì)的請(qǐng)參考下方鏈接
URL：https://developer.mozilla.org...
URLSearchParams：https://developer.mozilla.org...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/104040.html

相關(guān)文章

  • JS 中 URL 編碼的問(wèn)題.

    摘要：這些字符是普通字符編碼解碼的問(wèn)題既然瀏覽器會(huì)默認(rèn)給進(jìn)行編碼那么服務(wù)器就會(huì)默認(rèn)給解碼。 URL 編碼 為什么要對(duì) URL 編碼 1. 避免解析錯(cuò)誤 我們的 queryString 的形式是使用 ?開(kāi)始, key=value 傳遞參數(shù), key-value pairs 之間使用 & 連接.比如: ?postid=5038412&t=1450591802326 服務(wù)器會(huì) 根據(jù) & 解析 ...

    lanffy 評(píng)論0 收藏0

  • 徹底理解從輸入URL與頁(yè)面展現(xiàn)

    摘要：五瀏覽器繪制網(wǎng)頁(yè)繪制過(guò)程主要是結(jié)構(gòu)與樣式的結(jié)合，以及行為動(dòng)態(tài)效果的展現(xiàn)。之后會(huì)寫(xiě)系列文章，歡迎圍觀(guān)主要參考文章基礎(chǔ)進(jìn)階詳解與編碼前端面試題從到頁(yè)面展現(xiàn)，這之中發(fā)生了什么圖解 流程概述： 地址欄輸入U(xiǎn)RL ——> 域名解析 ——> 服務(wù)器處理請(qǐng)求 ——> 瀏覽器處理響應(yīng) ——> 瀏覽器繪制網(wǎng)頁(yè) 一.地址欄輸入U(xiǎn)RL 認(rèn)識(shí)URL showImg(https://segmentfault....

    abson 評(píng)論0 收藏0

  • Angular路由導(dǎo)航的7個(gè)步驟

    摘要：路由過(guò)程的個(gè)步驟每次點(diǎn)擊鏈接或?yàn)g覽器改變時(shí)，路由器都會(huì)確保應(yīng)用程序做出相應(yīng)的反應(yīng)。一旦所有的都已完成，其返回值是合并的路徑的然后路由器繼續(xù)步驟。你可以使用助記記住路由器經(jīng)過(guò)的步驟的順序。 路由過(guò)程的7個(gè)步驟 每次點(diǎn)擊鏈接或?yàn)g覽器URL改變時(shí)，Angular路由器都會(huì)確保應(yīng)用程序做出相應(yīng)的反應(yīng)。 為了做到這一點(diǎn)，Angular路由器執(zhí)行以下7個(gè)步驟的順序： 解析(Parse)：它解析...

    BLUE 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<