成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

url字符串解析

Mike617 / 445人閱讀

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

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

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

iframe

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

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

a

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

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

并且可以利用它簡單判斷一個 url 是否是合法的，不合法的 url，host, origin為null

URL

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

返回的URL對象有個searchParams屬性，可以對 url 的search部分解析，再也不需要用循環(huán)或正則方式獲取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

當(dāng)然，有個專門處理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ì)的請參考下方鏈接
URL：https://developer.mozilla.org...
URLSearchParams：https://developer.mozilla.org...

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104040.html

相關(guān)文章

  • JS 中 URL 編碼的問題.

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

    lanffy 評論0 收藏0

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

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

    abson 評論0 收藏0

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

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

    BLUE 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<