js如何方便地獲取URL中各個組成部分獲取路徑上查詢字符串

發布時間：2023-07-03 00:11:36 作者：網友整理

統一資源定位符(URL)，是對 Web 資源（網頁、圖像、文件）的引用。URL 是指定資源位置和檢索資源的一種協議（如http、ftp、mailto）。

如下代碼，這是今日頭條發布文章的URL地址：

https://mp.toutiao.com/profile_v4/graphic/publish

有時需要從URL中獲取特定的信息，比如域名、頁面地址、查詢參數等，這里介紹如何使用URL對象來解析。

URL結構

如下圖，詳細介紹組成URL的各個部分：

圖1

protocol —— 網絡協議，如http、https、mailto、ftp等。
username—— 用戶名，如ftp訪問時需要用戶名。
password——密碼，如ftp訪問時需要密碼。
hostname——主機名稱。
port——端口號。
host——主機地址，包括hostname，和port。
pathname——路徑名稱。
search——查詢字符串，問號“？”開頭。
path——完整路徑，包括路徑名稱和查詢參數。
hash——哈希值，#號開頭。

URL()構造函數

創建一個URL解析實例，如下：

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

通過上面url實例對象就可以解析一個路徑地址。

relativeOrAbsolute參數可以是絕對或相對 URL。如果第一個參數是相對的，那么第二個參數absoluteBase必須要有，并且必須是一個絕對 URL，作為第一個參數的基礎路徑。

例如，使用絕對 URL 進行初始化

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

或者，使用相對路徑初始化

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

你可以在控制臺打印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;
}

在JAVAScript 中 USVString 返回url中對應部分的字符串值。

獲取路徑上查詢字符串

使用 url.search 屬性訪問以 ? 為前綴的查詢字符串，如下：

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

如果沒有查詢字符串，則url.search 返回空字符串''。

解析查詢字符串

使用url.searchParams屬性解析查詢字符串，通過get方法獲取對應參數值，或者has方法判斷是否存在某一個參數。

讓我們看一個例子：

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.has('who');  // => true
url.searchParams.has('missing');  // => false

關于URLSearchParams更多方法，可以參考
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

獲取主機名

使用 url.hostname 屬性獲取 URL 的主機名，如下：

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

路徑名

url.pathname 屬性獲取 URL 的路徑名：

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

如果 URL 沒有路徑，則該url.pathname屬性返回一個斜杠字符/：

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

哈希值

最后，可以使用 url.hash 屬性獲取哈希值：

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

當 URL 中的哈希值丟失時，url.hash計算結果為空字符串''：

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

網址驗證

當new URL()構造函數創建實例時，它還會驗證 URL 的正確性。如果 URL 值無效，則拋出 TypeError。

例如，http ://example.com 是一個無效的 URL，因為 http 后面有空格字符。

讓我們使用這個無效的 URL 來初始化解析器：

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

URL 修改

除了使用 search、hostname、pathname等屬性獲取值，您還可以通過這些屬性重新賦值修改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'