資訊專欄INFORMATION COLUMN
摘要：眾所周知，我們可以通過獲得當前頁面地址的等屬性，但是如果給你一個字符串，怎么得到這些屬性呢也許用正則是一個方法。假設有這樣一個字符串，該怎么解析它呢。返回的對象有個屬性，可以對的部分解析，再也不需要用循環或正則方式獲取對象。
眾所周知，我們可以通過location獲得當前頁面地址（URL）的href、protocol、host、search、hash等屬性，但是如果給你一個url字符串，怎么得到這些屬性呢？也許用正則是一個方法。
假設有這樣一個 url 字符串"https://demo.vczhan.com/wave/heart-wave.html?name=abc&age=18#part"，該怎么解析它呢。
直接把url賦值給location.href會從當前頁面跳轉到 url 的頁面，如果我們在當前頁面新建一個iframe并給它的src賦值這個 url ，似乎可以通過iframe的window.location拿到url的各個屬性。
但是很遺憾，對于跨域的url，不會觸發iframe的window.onload，直接訪問location.href，瀏覽器也給出提示限制跨域。
提到 url ，可能會有人想到標簽，因為我們經常訪問頁面地址是通過點擊a鏈接跳轉的，那么能否通過它來解析 url 呢？
我們創建了一個a元素，并給它的href賦值了 url ，可以打印出這個a元素的對象，其中就包括 url 的這些屬性。
并且可以利用它簡單判斷一個 url 是否是合法的，不合法的 url，host, origin為null
利用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...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104040.html
摘要：這些字符是普通字符編碼解碼的問題既然瀏覽器會默認給進行編碼那么服務器就會默認給解碼。 URL 編碼 為什么要對 URL 編碼 1. 避免解析錯誤 我們的 queryString 的形式是使用 ?開始, key=value 傳遞參數, key-value pairs 之間使用 & 連接.比如: ?postid=5038412&t=1450591802326 服務器會 根據 & 解析 ...
摘要：五瀏覽器繪制網頁繪制過程主要是結構與樣式的結合，以及行為動態效果的展現。之后會寫系列文章，歡迎圍觀主要參考文章基礎進階詳解與編碼前端面試題從到頁面展現，這之中發生了什么圖解 流程概述： 地址欄輸入URL ——> 域名解析 ——> 服務器處理請求 ——> 瀏覽器處理響應 ——> 瀏覽器繪制網頁 一.地址欄輸入URL 認識URL showImg(https://segmentfault....
摘要：路由過程的個步驟每次點擊鏈接或瀏覽器改變時，路由器都會確保應用程序做出相應的反應。一旦所有的都已完成，其返回值是合并的路徑的然后路由器繼續步驟。你可以使用助記記住路由器經過的步驟的順序。 路由過程的7個步驟 每次點擊鏈接或瀏覽器URL改變時，Angular路由器都會確保應用程序做出相應的反應。 為了做到這一點，Angular路由器執行以下7個步驟的順序： 解析(Parse)：它解析...
閱讀 2468·2021-11-19 09:59
閱讀 1991·2019-08-30 15:55
閱讀 935·2019-08-29 13:30
閱讀 1336·2019-08-26 10:18
閱讀 3087·2019-08-23 18:36
閱讀 2388·2019-08-23 18:25
閱讀 1161·2019-08-23 18:07
閱讀 439·2019-08-23 17:15
