如何使用 JavaScript 解析 URL

時間 2019-11-09

標籤如何使用 javascript 解析 url 欄目 JavaScript 简体版

原文原文鏈接

阿里雲最近在作活動，低至2折，有興趣能夠看看：
https://promotion.aliyun.com/...

爲了保證的可讀性，本文采用意譯而非直譯。javascript

在 Web 開發中，有許多狀況須要解析 URL,這篇主要學習如何使用 URL 對象實現這一點。html

開始

建立一個如下內容的 HTML 文件，並在瀏覽器中打開。前端

<html>
    <head>
        <title>JavaScript URL parsing</title>
    </head>
    <body>
        <script>
            // 激動人心的代碼即將寫在這裏
        </script>
    </body>
</html>

若是你想嘗試本文中的任何內容，能夠將其放在 <script> 標記中，保存，從新加載頁面，看看會發生什麼！在本教程中，將使用 console.log 來打印所須要的內容，你能夠打開開發都工具，來查看內容。java

什麼是 URL

這應該是至關簡單的，但讓咱們說清楚。 URL 是網頁的地址，能夠在瀏覽器中輸入以獲取該網頁的惟一內容。能夠在地址欄中看到它：git

URL 是統一資源定位符，對能夠從互聯網上獲得的資源的位置和訪問方法的一種簡潔的表示，是互聯網上標準資源的地址。互聯網上的每一個文件都有一個惟一的 URL，它包含的信息指出文件的位置以及瀏覽器應該怎麼處理它。github

此外，若是你不熟悉基本 URL 路徑的工做方式，能夠查看此文學習。web

URL 不都長的同樣的
這是一個快速提醒 - 有時 URL 可能很是奇怪，以下：segmentfault

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

獲取當前頁面的 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/...

你的點贊是我持續分享好東西的動力，歡迎點贊！