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

詳解使用 JavaScript 解析 URL的方法

Nov 26, 2020 pm 06:02 PM
javascripturl

詳解使用 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')
將其複製並貼上到

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中