詳解使用 JavaScript 解析 URL的方法-js教程-PHP中文網

開始

什麼是 URL

主机（host）

来源（origin）

pathname（文件名）

锚点（hash）

查询参数 (search)

使用 URLSearchParams 解析查询参数

扩展

获取 URL 的中参数

修改 URL 的中某个参数值

首頁

web前端

js教程

詳解使用 JavaScript 解析 URL的方法

青灯夜游

Nov 26, 2020 pm 06:02 PM

javascript url

詳解使用 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工具

熱工具

熱門話題

Java教學

1654

CakePHP 教程

1413

Laravel 教程

1306

PHP教程

1252

C# 教程

1225

Related knowledge

為什麼NameResolutionError(self.host, self, e) from e，怎麼解決 Mar 01, 2024 pm 01:20 PM

報錯的原因NameResolutionError(self.host,self,e)frome是由urllib3函式庫中的例外類型,這個錯誤的原因是DNS解析失敗,也就是說,試圖解析的主機名稱或IP位址無法找到。這可能是由於輸入的URL位址不正確,或DNS伺服器暫時無法使用所導致的。如何解決解決此錯誤的方法可能有以下幾種:檢查輸入的URL地址是否正確,確保它是可訪問的確保DNS伺服器可用,您可以嘗試在命令行中使用"ping"命令來測試DNS伺服器是否可用嘗試使用IP位址而不是主機名稱來存取網站如果是在代理

如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

html和url的差別是什麼 Mar 06, 2024 pm 03:06 PM

區別：1、定義不同，url是是統一資源定位符，而html是超文本標記語言；2、一個html中可以有很多個url，而一個url中只能存在一個html頁面；3、html指的是網頁，而url指的是網站位址。

WebSocket與JavaScript：實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket：打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

See all articles

詳解使用 JavaScript 解析 URL的方法

開始

什麼是 URL

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題