JavaScript >> Javascript 文檔 >  >> Tags >> URL

使用 parse-url 在 JavaScript 中輕鬆解析 URL

簡介

解析 URL 是 Web 開發期間執行的一項常見任務,也是一項看似簡單但可能變得複雜的任務。您很少會遇到使解析變得如此簡單以至於您不必自己考慮太多的模塊。

儘管相對年輕(發佈於 2021 年 6 月),每週下載量接近 300 萬,parse-url 是 JavaScript 中解析 URL 的頂級模塊之一。

網址的一部分

一個 URL 有很多部分,因此在不進行純字符串解析的情況下將其分解成碎片是一個強大的工具。每個 URL 都有相同的主要部分,其他部分是可選的,具體取決於查詢或操作。

URL的組成元素是:

  • 方案 - 用於標識用於在 Internet 上獲取資源的協議
    • 一些比較流行的協議是:HTTP、HTTPS、IP、ICMP、TCP、UDP 等。
  • 主持人 - 擁有我們正在獲取的資源的主機的名稱 (www.somehost.com )
  • 路徑 - 位於主機上的資源的路徑(www.somehost.com/path/to/index.html )
  • 查詢字符串 - 包含 key-value 的字符串 對(www.somehost.com/index?key=value&key2=value2 )

這些是 URL 的主要部分,但我們將看到我們可以使用 parse-url 檢索更多內容 ,在一個非常易讀和再次 , 可解析的格式。

安裝和設置 parse-url 模塊

我們首先為我們的迷你項目創建一個名為 parse_url 的文件夾 .在文件夾中,我們可以使用 npm 安裝模塊 :

$ npm i parse-url

在我們的代碼中使用模塊(在 index.js 文件),我們必須 require 它:

const parseUrl = require('parse-url');

就這樣,我們可以出發了!讓我們看看這個模塊提供了什麼。

解析網址

首先,讓我們使用一個簡單的 URL:https://www.stackabuse.com . parseUrl 的構造函數 接受兩個參數,string_urlnormalize , normalize 是可選的。

默認情況下,它設置為 false 並且假定提供的 URL 已經標準化。當 true ,它將非規範化的 URL 轉換為規範化的 URL。例如:

someRandomUrl.com:80 --> http://someRandomUrl.com

這稱為 URL 規範化 . parse-url 模塊的規範化基於 normalize-url 模塊和 normalize-url 模塊的工作原理如上所示。

讓我們解析一個 URL:

const url = 'https://www.stackabuse.com/';
const parsedUrl = parseUrl(url);

console.log(parsedUrl)

代碼的輸出將採用 JSON 格式,由該 URL 的元素組成:

{
  protocols: [ 'https' ],
  protocol: 'https',
  port: null,
  resource: 'www.stackabuse.com',
  user: '',
  pathname: '',
  hash: '',
  search: '',
  href: 'https://www.stackabuse.com',
  query: [Object: null prototype] {}
}

正如你所看到的,有很多東西被提取出來了,雖然有些是空的,因為我們提供的 URL 非常簡單。我們來看看這個 JSON 中的元素:

  • protocols - URL 中使用的協議列表(可以是多個)
  • protocol - protocols 中的第一個
  • port - 一個端口(如果提供)
  • resource - 主持人
  • user - 主機服務器上的用戶 ([email protected] )
  • pathname - 資源路徑
  • hash - 如果提供,# 之後的信息 (散列) - 通常是網頁上的錨
  • search - 一個查詢字符串
  • href - 完整的網址

使用 GitHub 鏈接可以找到一個有趣的示例,這也是最初創建此模塊的原因之一。與您每天看到的其他 URL 相比,GitHub 鏈接可能會變得相當複雜和令人費解,並且可能包含多種協議和用戶:

const url = 'git+ssh://[email protected]/path/to/resource.git';
const parsedUrl = parseUrl(url);

console.log(parsedUrl)

這導致:

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

{
  protocols: [ 'git', 'ssh' ],
  protocol: 'git',
  port: null,
  resource: 'somehost.com',
  user: 'git',
  pathname: '/path/to/resource.git',
  hash: '',
  search: '',
  href: 'git+ssh://[email protected]/path/to/resource.git',
  query: [Object: null prototype] {}
}

此處的列表協議已更改,因為使用了多個協議。但是,在打印出 URL 信息時會引用第一個。我們還可以看到pathname 現在填充了資源的路徑。

parse-url的賣點之一 是因為它與 Git URL 配合得非常好。

讓我們真正建立 URL 並包含一個哈希和幾個鍵值查詢:

const url = 'git+ssh://[email protected]:30/path/to/resource.git?key1=value1&key2=value2#anchor';
const parsedUrl = parseUrl(url);

console.log(parsedUrl)

此示例與上一個示例略有不同,僅足以填寫上一個示例中的空值。輸出將是:

{
  protocols: [ 'git', 'ssh' ],
  protocol: 'git',
  port: 30,
  resource: 'somehost.com',
  user: 'git',
  pathname: '/path/to/resource.git',
  hash: 'anchor',
  search: 'key1=value1&key2=value2',
  href: 'git+ssh://[email protected]:30/path/to/resource.git?key1=value1&key2=value2#anchor',
  query: [Object: null prototype] { key1: 'value1', key2: 'value2' }
}

端口、哈希和查詢現在都存在了——我們甚至得到了查詢的鍵和值!將解析後的數據以人類可讀的格式結構化,這也是普遍接受且易於解析的,在解析 URL 時非常有用。

雖然,這只是返回對象的漂亮打印輸出。是什麼讓我們真的 使用這些解析的元素是因為它們都是返回對象的所有字段,我們可以輕鬆訪問:

console.log("The protocols used in the URL are " + parsedUrl.protocols);
console.log("The port used in the URL is " + parsedUrl.port);
console.log("The resource in the URL is " + parsedUrl.resource);
console.log("The user in the URL is " + parsedUrl.user);
console.log("The pathname in the URL is " + parsedUrl.pathname);
console.log("The hash in the URL is " + parsedUrl.hash);
console.log("The search part in the URL is " + parsedUrl.search);
console.log("Full URL is " + parsedUrl.href);

運行此代碼會導致:

The protocols used in the URL are git,ssh
The port used in the URL is 30
The resource in the URL is somehost.com
The user in the URL is git
The pathname in the URL is /path/to/resource.git
The hash in the URL is anchor
The search part in the URL is key1=value1&key2=value2
Full URL is git+ssh://[email protected]:30/path/to/resource.git?key1=value1&key2=value2#anchor

最後,我們來看看 URL 規範化的結果。如果我們傳遞一個未規範化的 URL,例如 stackabuse.com:3000/path/to/index.html#anchor , 作為 URL 字符串:

const url = 'stackabuse.com:3000/path/to/index.html#anchor';
const parsedUrl = parseUrl(url, true);
console.log(parsedUrl);

這導致:

{
  protocols: [ 'http' ],
  protocol: 'http',
  port: 3000,
  resource: 'stackabuse.com',
  user: '',
  pathname: '/path/to/index.html',
  hash: 'anchor',
  search: '',
  href: 'http://stackabuse.com:3000/path/to/index.html#anchor',
  query: [Object: null prototype] {}
}

我們可以看到解析器自動分配了http 作為協議並填寫href 財產正確。缺少的部分沒有填寫,因為它們一開始就沒有提供。

如果我們要禁用規範化功能,同時提供非規範化的 URL,結果將是關閉的:

{
  protocols: [],
  protocol: 'file',
  port: null,
  resource: '',
  user: '',
  pathname: 'stackabuse.com:3000/path/to/index.html',
  hash: 'anchor',
  search: '',
  href: 'stackabuse.com:3000/path/to/index.html#anchor',
  query: [Object: null prototype] {}
}

注意: 如果你設置 normalizetrue 並提供一個已經規範化的 URL,實際上什麼都沒有發生,並且它被正確解析。鑑於此 - 您通常希望將參數設置為 true。

parsedUrl 是一個對象,它的屬性是可以改變的。我們可以簡單地訪問任何屬性並對其進行更改:

console.log(parsedUrl.port) // 3000
parsedUrl.port = 4000
console.log(parsedUrl.port) // 4000

但是,這不是我們想要的行為,也不應該這樣做,因為該模塊僅用於解析 URL。唯一一次你應該改變 parsedUrl 像這樣的對像是當您對某些財產的價值充滿信心時,否則,您可能會朝自己的腿開槍。

結論

我們見過 parse-url 讓我們無需任何額外處理即可輕鬆解析 URL,並使解析 URL 的過程非常簡單易讀。

它根據需要拆分所有內容並創建一個 parsedUrl 可以像任何其他對像一樣訪問和更改的對象。該模塊盡可能簡單,具有簡潔的輸出和語法,並且盡可能簡單,從而產生快速準確的結果。


Tutorial JavaScript 教程
  1. 如何將 Angular CLI 更新到版本 9

  2. 實用 React 和 Redux - 第 1 部分

  3. [Slack API 教程] 為您的 Slack 應用構建一個家🏡

  4. 如何呈現您的網站

  5. 如何在 JavaScript 中獲取數組中的最後一項

  6. 讓我們開發一個二維碼生成器,第八部分:不同的尺寸

  7. 帶有 JavaScript 的動畫著陸頁

  1. 如何將你的 React 項目部署到 Netlify? (一步步)

  2. React 類組件與函數式組件:有什麼區別

  3. React Hooks 和組件組合

  4. 即使選中了一個,我也會收到單選按鈕的輸出值

  5. 將這些嵌套函數從箭頭轉換為舊樣式以及變量會發生什麼

  6. 分析 Gary Bernhardts Wat Talk 中的 JavaScript 示例

  7. TypeScript 中的類型推斷

  1. 為什麼 Headless CMS 需要頁面管理

  2. 什麼是 Heroku - 插圖短褲 - H-IS1

  3. 如果在 JS 中就沒有別的了

  4. 什麼是 PostCSS?如何使用插件自動化 CSS 任務