【譯】如何用 JavaScript 來解析 URL

原文連接： https://dmitripavlutin.com/pa...

統一資源定位符，縮寫爲URL，是對網絡資源(網頁、圖像、文件)的引用。URL指定資源位置和檢索資源的機制(http、ftp、mailto)。

舉個例子，這裏是這篇文章的 URL 地址：

https://dmitripavlutin.com/parse-url-javascript

不少時候你須要獲取到一段 URL 的某個組成部分。它們多是 hostname（例如 dmitripavlutin.com），或者 pathname（例如 /parse-url-javascript）。

一個方便的用於獲取 URL 組成部分的辦法是經過 URL() 構造函數。

在這篇文章中，我將給你們展現一段 URL 的結構，以及它的主要組成部分。

接着，我會告訴你如何使用 URL() 構造函數來輕鬆獲取 URL 的組成部分，好比 hostname，pathname，query 或者 hash。

1. URL 結構

一圖勝千言。不須要過多的文字描述，經過下面的圖片你就能夠理解一段 URL 的各個組成部分：

2. URL() 構造函數

URL() 構造函數容許咱們用它來解析一段 URL：

const url = new URL(relativeOrAbsolute [, absoluteBase]);

參數 relativeOrAbsolute 既能夠是絕對路徑，也能夠是相對路徑。若是第一個參數是相對路徑的話，那麼第二個參數 absoluteBase 則必傳，且必須爲第一個參數的絕對路徑。

舉個例子，讓咱們用一個絕對路徑的 URL 來初始化 URL() 函數：

const url = new URL('http://example.com/path/index.html');

url.href; // => 'http://example.com/path/index.html'

或者咱們可使用相對路徑和絕對路徑：

const url = new URL('/path/index.html', 'http://example.com');

url.href; // => 'http://example.com/path/index.html'

URL() 實例中的 href 屬性返回了完整的 URL 字符串。

在新建了 URL() 的實例之後，你能夠用它來訪問前文圖片中的任意 URL 組成部分。做爲參考，下面是 URL() 實例的接口列表：

interface URL {
  href:     USVString;
  protocol: USVString;
  username: USVString;
  password: USVString;
  host:     USVString;
  hostname: USVString;
  port:     USVString;
  pathname: USVString;
  search:   USVString;
  hash:     USVString;

  readonly origin: USVString;
  readonly searchParams: URLSearchParams;

  toJSON(): USVString;
}

上述的 USVString 參數在 JavaScript 中會映射成字符串。

3. Query 字符串

url.search 能夠獲取到 URL 當中 ? 後面的 query 字符串：

const url = new URL(
  'http://example.com/path/index.html?message=hello&who=world'
);

url.search; // => '?message=hello&who=world'

若是 query 參數不存在，url.search 默認會返回一個空字符串 ''：

const url1 = new URL('http://example.com/path/index.html');
const url2 = new URL('http://example.com/path/index.html?');

url1.search; // => ''
url2.search; // => ''

3.1 解析 query 字符串

相比於得到原生的 query 字符串，更實用的場景是獲取到具體的 query 參數。

獲取具體 query 參數的一個簡單的方法是利用 url.searchParams 屬性。這個屬性是 URLSearchParams 的實例。

URLSearchParams 對象提供了許多用於獲取 query 參數的方法，如get(param)，has(param)等。

下面來看個例子：

const url = new URL(
  'http://example.com/path/index.html?message=hello&who=world'
);

url.searchParams.get('message'); // => 'hello'
url.searchParams.get('missing'); // => null

url.searchParams.get('message') 返回了 message 這個 query 參數的值——hello。

若是使用 url.searchParams.get('missing') 來獲取一個不存在的參數，則獲得一個 null。

4. hostname

url.hostname 屬性返回一段 URL 的 hostname 部分：

const url = new URL('http://example.com/path/index.html');

url.hostname; // => 'example.com'

5. pathname

url. pathname 屬性返回一段 URL 的 pathname 部分：

const url = new URL('http://example.com/path/index.html?param=value');

url.pathname; // => '/path/index.html'

若是這段 URL 不含 path，則該屬性返回一個斜槓 /：

const url = new URL('http://example.com/');

url.pathname; // => '/'

6. hash

最後，咱們能夠經過 url.hash 屬性來獲取 URL 中的 hash 值：

const url = new URL('http://example.com/path/index.html#bottom');

url.hash; // => '#bottom'

當 URL 中的 hash 不存在時，url.hash 屬性會返回一個空字符串 ''：

const url = new URL('http://example.com/path/index.html');

url.hash; // => ''

7. URL 校驗

當使用 new URL() 構造函數來新建實例的時候，做爲一種反作用，它同時也會對 URL 進行校驗。若是 URL 不合法，則會拋出一個 TypeError。

舉個例子，http ://example.com 是一段非法 URL，由於它在 http 後面多寫了一個空格。

讓咱們用這個非法 URL 來初始化 URL() 構造函數：

try {
  const url = new URL('http ://example.com');
} catch (error) {
  error; // => TypeError, "Failed to construct URL: Invalid URL"
}

由於 http ://example.com 是一段非法 URL，跟咱們想的同樣，new URL() 拋出了一個 TypeError。

8. 修改 URL

除了獲取 URL 的組成部分之外，像 search，hostname，pathname 和 hash 這些屬性都是可寫的——這也意味着你能夠修改 URL。

舉個例子，讓咱們把一段 URL 從 red.com 修改爲 blue.io：

const url = new URL('http://red.com/path/index.html');

url.href; // => 'http://red.com/path/index.html'

url.hostname = 'blue.io';

url.href; // => 'http://blue.io/path/index.html'

注意，在 URL() 實例中只有 origin 和 searchParams 屬性是隻讀的，其餘全部的屬性都是可寫的，而且會修改原來的 URL。

9. 總結

URL() 構造函數是 JavaScript 中的一個可以很方便地用於解析（或者校驗）URL 的工具。

new URL(relativeOrAbsolute [, absoluteBase]) 中的第一個參數接收 URL 的絕對路徑或者相對路徑。當第一個參數是相對路徑時，第二個參數必傳且必須爲第一個參數的基路徑。

在新建 URL() 的實例之後，你就能很輕易地得到 URL 當中的大部分組成部分了，好比：

• url.search 獲取原生的 query 字符串
• url.searchParams 經過 URLSearchParams 的實例去獲取具體的 query 參數
• url.hostname獲取 hostname
• url.pathname 獲取 pathname
• url.hash 獲取 hash 值

那麼你最愛用的解析 URL 的 JavaScript 工具又是什麼呢？