首頁 > web前端 > js教程 > 詳解使用 JavaScript 解析 URL的方法

詳解使用 JavaScript 解析 URL的方法

青灯夜游
發布: 2020-11-26 18:02:11
轉載
11740 人瀏覽過

詳解使用 JavaScript 解析 URL的方法

在 Web 開發中,有許多情況需要解析 URL,這篇主要學習如何使用 URL 物件實現這一點。

開始

建立一個以下內容的 HTML 文件,並在瀏覽器中開啟。

    
        <title>JavaScript URL parsing</title>
    
    
        <script>
            // 激动人心的代码即将写在这里
        </script>
    
登入後複製

如果你想嘗試本文中的任何內容,可以將其放在 <script> 標記中,保存,重新加載頁面,看看會發生什麼!在本教學中,將使用 console.log  來列印所需的內容,你可以打開開發都工具,來查看內容。 </script>

什麼是 URL

這應該是相當簡單的,但讓我們說清楚。 URL 是網頁的位址,可以在瀏覽器中輸入以取得該網頁的唯一內容。可以在地址欄中看到它:

詳解使用 JavaScript 解析 URL的方法

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

取得目前頁面的URL 非常簡單- 我們可以使用

window.location

試著把這個加入到我們形如寫的的腳本中:

console.log(window.location);
登入後複製
查看瀏覽器的控制台:

詳解使用 JavaScript 解析 URL的方法

不是你想要的?這是因為它不會回傳你在瀏覽器中看到的實際URL 位址-它傳回的是一個URL 物件。使用這個 URL 對象,我們可以解析 URL 的不同部分,接下來就會講到。

建立 URL 物件

很快就會看到,可以使用 URL 物件來了解 URL 的不同部分。如果你想對任何 URL 執行此操作,而不僅僅是當前頁面的 URL,該怎麼辦?我們可以透過建立一個新的 URL 物件來實現。以下是如何創建一個:

var myURL = new URL('https://example.com');
登入後複製
就這麼簡單!可以列印

myURL 來查看myURL 的內容:

console.log(myURL);
登入後複製

詳解使用 JavaScript 解析 URL的方法

出於本文的目的,將myURL 設定為這個值:

var myURL = new URL('https://example.com:4000/folder/page.html?x=y&a=b#section-2')
登入後複製
將其複製並貼上到

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板