如何使用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 不都長的一樣的
這是一個快速提醒 - 有時 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);
- strstrs = 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
- }
