如何使用 JavaScript 解析 URL
在 Web 開發中，有許多情況需要解析 URL ,這篇主要學習如何使用 URL 物件實現這一點。
開始
建立一個以下內容的 HTML 檔案，並在瀏覽器中開啟。
<html> <head> <title>JavaScript URL parsing</title> </head> <body> <script> // 激動人心的程式碼即將寫在這裡 </script> </body> </html>
如果你想嘗試本文中的任何內容，可以將其放在 <script> 標記中，儲存，重新載入頁面，看看會發生什麼！ 在本教程中，將使用 console.log 來列印所需要的內容，你可以開啟開發都工具，來檢視內容。
什麼是 URL
這應該是相當簡單的，但讓我們說清楚。 URL 是網頁的地址，可以在瀏覽器中輸入以獲取該網頁的唯一內容。 可以在位址列中看到它：
URL 是統一資源定位符，對可以從網際網路上得到的資源的位置和訪問方法的一種簡潔的表示，是網際網路上標準資源的地址。網際網路上的每個檔案都有一個唯一的 URL，它包含的資訊指出檔案的位置以及瀏覽器應該怎麼處理它。
此外，如果你不熟悉基本 URL 路徑的工作方式，可以檢視 此文 學習。
這是一個快速提醒 - 有時 URL 可能非常奇怪，如下：
https://example.com :1234/page/?a=b
https://154.23.54.156/page?x=...
file:///Users/username/folder/file.png
獲取當前URL
獲取當前頁面的 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')
將其複製並貼上到 <script> 元素中，以便你可以繼續操作！ 這個 URL 的某些部分可能不熟悉，因為它們並不總是被使用 - 但你將在下面瞭解它們，所以不要擔心！
URL 物件的結構
使用 URL 物件，可以非常輕鬆地獲取 URL 的不同部分。 以下是你可以從 URL 物件獲得的所有內容。 對於這些示例，我們將使用上面設定的 myURL 。
href
URL 的 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/...