摘要:端口的端口號位于域名后面,用冒號分隔例如。大多數網址都沒有端口號,這種情況非常罕見。但通常域名默認為一個特定端口,因此不需要端口號。它基本上是整個,直到端口號結束,如果沒有端口號,到主機名結束。
在 Web 開發中,有許多情況需要解析 URL,這篇主要學習如何使用 URL 對象實現這一點。
想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你!
開始創建一個以下內容的 HTML 文件,并在瀏覽器中打開。
JavaScript URL parsing
如果你想嘗試本文中的任何內容,可以將其放在
URL 是統一資源定位符,對可以從互聯網上得到的資源的位置和訪問方法的一種簡潔的表示,是互聯網上標準資源的地址?;ヂ摼W上的每個文件都有一個唯一的 URL,它包含的信息指出文件的位置以及瀏覽器應該怎么處理它。
此外,如果你不熟悉基本 URL 路徑的工作方式,可以查看此文學習。
URL 不都長的一樣的獲取當前URL這是一個快速提醒 - 有時 URL 可能非常奇怪,如下:
https://example.com:1234/page/?a=b
http://localhost/page.html
https://154.23.54.156/page?x=...
file:///Users/username/folder/file.png
獲取當前頁面的 URL 非常簡單 - 我們可以使用 window.location。
試著把這個添加到我們形如寫的的腳本中:
console.log(window.location);
查看瀏覽器的控制臺:
不是你想要的?這是因為它不返回你在瀏覽器中看到的實際 URL 地址——它返回的是一個 URL 對象。使用這個 URL 對象,我們可以解析 URL 的不同部分,接下來就會講到。
創建 URL 對象很快就會看到,可以使用 URL 對象來了解 URL 的不同部分。如果你想對任何 URL 執行此操作,而不僅僅是當前頁面的 URL,該怎么辦? 我們可以通過創建一個新的 URL 對象來實現。 以下是如何創建一個:
var myURL = new URL("https://example.com");
就這么簡單! 可以打印 myURL 來查看 myURL 的內容:
console.log(myURL);
出于本文的目的,將 myURL 設置為這個值:
var myURL = new URL("https://example.com:4000/folder/page.html?x=y&a=b#section-2")
將其復制并粘貼到 元素中,以便你可以繼續操作! 這個 URL 的某些部分可能不熟悉,因為它們并不總是被使用 - 但你將在下面了解它們,所以不要擔心!
URL 對象的結構使用 URL 對象,可以非常輕松地獲取 URL 的不同部分。 以下是你可以從 URL 對象獲得的所有內容。 對于這些示例,我們將使用上面設置的 myURL。
hrefURL 的 href 基本上是作為字符串(文本)的整個 URL。如果你想把頁面的 URL 作為字符串而不是 URL 對象,你可以寫 window.location.href。
console.log(myURL.href); // Output: "https://example.com:4000/folder/page.html?x=y&a=b#section-2"協議 (protocol)
URL的協議是一開始的部分。這告訴瀏覽器如何訪問該頁面,例如通過 HTTP 或 HTTPS。 但是還有很多其他協議,比如 ftp(文件傳輸協議)和 ws(WebSocket)。通常,網站將使用 HTTP 或 HTTPS。
雖然如果你的計算機上打開了文件,你可能正在使用文件協議! URL對象的協議部分包括:,但不包括 //。 讓我們看看 myURL 吧!
console.log(myURL.protocol); // Output: "https:"主機名(hostname)
主機名是站點的域名。 如果你不熟悉域名,則它是在瀏覽器中看到的URL的主要部分 - 例如 google.com 或codetheweb.blog。
console.log(myURL.hostname); // Output: "example.com"端口(port)
URL 的端口號位于域名后面,用冒號分隔(例如 example.com:1234)。 大多數網址都沒有端口號,這種情況非常罕見。
端口號是服務器上用于獲取數據的特定“通道” - 因此,如果我擁有 example.com,我可以在多個不同的端口上發送不同的數據。 但通常域名默認為一個特定端口,因此不需要端口號。 來看看 myURL 的端口號:
console.log(myURL.port); // Output: "4000"主機(host)
主機只是主機名和端口放在一起,嘗試獲取 myURL 的主機:
console.log(myURL.host); // Output: "example.com:4000"來源(origin)
origin 由 URL 的協議,主機名和端口組成。 它基本上是整個 URL,直到端口號結束,如果沒有端口號,到主機名結束。
console.log(myURL.origin); // Output: "https://example.com:4000"pathname(文件名)
pathname 從域名的最后一個 “/” 開始到 “?” 為止,是文件名部分,如果沒有 “?” ,則是從域名最后的一個 “/” 開始到 “#” 為止 , 是文件部分, 如果沒有 “?” 和 “#” , 那么從域名后的最后一個 “/” 開始到結束 , 都是文件名部分。
console.log(myURL.pathname); // Output: "/folder/page.html"錨點(hash)
從 “#” 開始到最后,都是錨部分。可以將哈希值添加到 URL 以直接滾動到具有 ID 為該值的哈希值 的元素。 例如,如果你有一個 id 為 hello 的元素,則可以在 URL 中添加 #hello 就可以直接滾動到這個元素的位置上。通過以下方式可以在 URL 獲取 “#” 后面的值:
console.log(myURL.hash); // Output: "#section-2"查詢參數 (search)
你還可以向 URL 添加查詢參數。它們是鍵值對,意味著將特定的“變量”設置為特定值。 查詢參數的形式為 key=value。 以下是一些 URL 查詢參數的示例:
?key1=value1&key2=value2&key3=value3
請注意,如果 URL 也有 錨點(hash),則查詢參數位于 錨點(hash)(也就是 ‘#’)之前,如我們的示例 URL 中所示:
console.log(myURL.search); // Output: "?x=y&a=b"
但是,如果我們想要拆分它們并獲取它們的值,那就有點復雜了。
使用 URLSearchParams 解析查詢參數要解析查詢參數,我們需要創建一個 URLSearchParams 對象,如下所示:
var searchParams = new URLSearchParams(myURL.search);
然后可以通過調用 searchParams.get("key")來獲取特定鍵的值。 使用我們的示例網址 - 這是原始搜索參數:
?x=y&a=b
因此,如果我們調用 searchParams.get("x"),那么它應該返回 y,而 searchParams.get("a")應該返回 b,我們來試試吧!
console.log(searchParams.get("x")); // Output: "y" console.log(searchParams.get("a")); // Output: "b"擴展 獲取 URL 的中參數
方法一:正則法
function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) { return unescape(r[2]); } return null; } // 這樣調用: alert(GetQueryString("參數名1")); alert(GetQueryString("參數名2")); alert(GetQueryString("參數名3"));
方法二:split拆分法
function GetRequest() { var url = location.search; //獲取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for(var i = 0; i < strs.length; i ++) { theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]); } } return theRequest; } var Request = new Object(); Request = GetRequest(); // var 參數1,參數2,參數3,參數N; // 參數1 = Request["參數1"]; // 參數2 = Request["參數2"]; // 參數3 = Request["參數3"]; // 參數N = Request["參數N"];修改 URL 的中某個參數值
//替換指定傳入參數的值,paramName為參數,replaceWith為新值 function replaceParamVal(paramName,replaceWith) { var oUrl = this.location.href.toString(); var re=eval("/("+ paramName+"=)([^&]*)/gi"); var nUrl = oUrl.replace(re,paramName+"="+replaceWith); this.location = nUrl; window.location.href=nUrl }
原文:
https://codetheweb.blog/2019/...
你的點贊是我持續分享好東西的動力,歡迎點贊!
交流干貨系列文章匯總如下,覺得不錯點個Star,歡迎 加群 互相學習。
https://github.com/qq44924588...
我是小智,公眾號「大遷世界」作者,對前端技術保持學習愛好者。我會經常分享自己所學所看的干貨,在進階的路上,共勉!
關注公眾號,后臺回復福利,即可看到福利,你懂的。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102069.html
摘要:使用方法編譯模板并根據所給的數據立即渲染出結果僅編譯模版暫不渲染,它會返回一個可重用的編譯后的函數根據給定的數據,對之前編譯好的模板進行數據渲染參考資料模板引擎概述 js模版引擎介紹 JavaScript 模板是將 HTML 結構從包含它們的內容中分離的方法。模板系統通常會引入一些新語法,但通常是非常簡單的,一個要注意的有趣的點是,替換標記通常是由雙花括號({ {……} })表示,這也...
摘要:對于性能來說真的非常糟糕。的推出使網頁性能提高了大約,所有這些都不需要開發人員參與。這意味著和中的存在錯誤。將放在中這個最終策略是一個相對較新的策略,對感知性能和漸進式渲染有很大好處。 CSS對于呈現頁面至關重要 - 在找到,下載和解析所有CSS之前,瀏覽器不會開始呈現 - 因此我們必須盡可能快地將其加載到用戶的設備上。 關鍵路徑上的任何延遲都會影響我們的開始渲染并讓用戶看到空白屏幕。...
摘要:示例攻擊如何進行下圖展示了攻擊者如何進行攻擊攻擊者利用網站的表單插入惡意字符串到網站數據庫中。恰恰相反,至少有兩種常見的方式,會導致受害者發起針對自己的反射型攻擊。攻擊者精心構造了一個包含惡意字符串的,將其發送給受害者。 原文地址:http://excess-xss.com/。如有翻譯不當之處,歡迎指出 :D 分為四部分: 概述 XSS 攻擊 XSS 防御 總結 第一部分:概述 X...
摘要:前端示例服務器端代碼可靠的實例添加回調函數拼接傳遞的是一個匿名的回調函數,要執行的話,暴露為一個全局方法出錯處理使用示例歡迎閱讀年前端面試題年前端面試題年前端筆試題我是,年輕的前端攻城獅一枚,愛專研,愛技術,愛分享。 let與var的區別? Let為ES6新添加申明變量的命令,它類似于var,但是有以下不同: 1、var聲明的變量,其作用域為該語句所在的函數內,且存在變量提...
閱讀 3371·2021-11-22 09:34
閱讀 2857·2021-10-09 09:43
閱讀 1445·2021-09-24 09:47
閱讀 2199·2019-08-30 12:53
閱讀 998·2019-08-29 14:00
閱讀 3356·2019-08-29 13:17
閱讀 2269·2019-08-28 18:00
閱讀 1284·2019-08-26 12:00