URL 解析の便利なツール 3 選！ JavaScript でできること

JavaScript で URL をホスト名とパスに解析する方法

URL を解析するには、いくつかの方法があります。最も一般的な方法は、URL オブジェクトと location オブジェクトを使用する方法です。

URL オブジェクトは、URL を表すために使用されます。このオブジェクトには、ホスト名、パス、クエリ文字列、ハッシュフラグメントなどのプロパティがあります。URL を解析するには、以下の手順を行います。

1. new URL() コンストラクタを使用して、URL オブジェクトを作成します。引数には、解析する URL 文字列を渡します。
2. オブジェクトのプロパティを使用して、ホスト名、パス、その他の情報にアクセスします。

const url = new URL('https://www.example.com/path/to/file.html');
const hostname = url.hostname;
const pathname = url.pathname;
console.log(hostname); // 出力: www.example.com
console.log(pathname); // 出力: /path/to/file.html

const hostname = location.hostname;
const pathname = location.pathname;
console.log(hostname); // 出力: www.example.com
console.log(pathname); // 出力: /path/to/file.html

正規表現を使用する

URL を解析するもう 1 つの方法は、正規表現を使用する方法です。正規表現は、パターンに一致する文字列を検索するために使用できる強力なツールです。URL を解析するには、以下の手順を行います。

1. ホスト名、パス、その他の情報を抽出するための正規表現を作成します。
2. RegExp オブジェクトを使用して、正規表現をコンパイルします。
3. exec() メソッドを使用して、正規表現を URL 文字列に一致させます。

const regex = /^(?:https?:\/\/)?([^:\/\?#]+)(?:\:([0-9]+))?(\/[^\?#]*)(\?(.*))?(#(.*))?$/;
const url = 'https://www.example.com:8080/path/to/file.html?param1=value1&param2=value2#fragment';
const match = regex.exec(url);
const hostname = match[1];
const port = match[2];
const pathname = match[3];
const search = match[4];
const hash = match[6];
console.log(hostname); // 出力: www.example.com
console.log(port); // 出力: 8080
console.log(pathname); // 出力: /path/to/file.html
console.log(search); // 出力: ?param1=value1&param2=value2
console.log(hash); // 出力: #fragment

用途

URL の解析は、さまざまな目的に役立ちます。以下に、いくつかの例を示します。

• 現在のページのホスト名を取得して、それが特定の Web サイトに属しているかどうかを確認します。
• URL のパス部分を使用して、ページ内の特定のコンテンツにアクセスします。
• ウェブアプリケーションで URL を処理します。
• 画像やその他のファイルを URL からロードします。

JavaScript で URL を解析することは、さまざまなタスクで役立つ便利なスキルです。上記の方法は、いずれも有効な方法であり、状況に応じて最適な方法を選択することができます。

JavaScript で URL を解析するサンプルコード

URL オブジェクトを使用する

// URL 文字列を指定
const urlString = 'https://www.example.com/path/to/file.html';

// URL オブジェクトを作成
const url = new URL(urlString);

// ホスト名を取得
const hostname = url.hostname;
console.log('ホスト名:', hostname); // 出力: ホスト名: www.example.com

// パスを取得
const pathname = url.pathname;
console.log('パス:', pathname); // 出力: パス: /path/to/file.html

// クエリ文字列を取得
const searchParams = url.searchParams;
for (const [key, value] of searchParams.entries()) {
  console.log(`クエリパラメータ: ${key} = ${value}`);
}
// 出力: クエリパラメータ: param1 = value1
//       クエリパラメータ: param2 = value2

location オブジェクトを使用する

// ホスト名を取得
const hostname = location.hostname;
console.log('ホスト名:', hostname); // 出力: ホスト名: www.example.com

// パスを取得
const pathname = location.pathname;
console.log('パス:', pathname); // 出力: パス: /path/to/file.html

// クエリ文字列を取得
const searchParams = new URLSearchParams(location.search);
for (const [key, value] of searchParams.entries()) {
  console.log(`クエリパラメータ: ${key} = ${value}`);
}
// 出力: クエリパラメータ: param1 = value1
//       クエリパラメータ: param2 = value2

正規表現を使用する

// URL 文字列を指定
const urlString = 'https://www.example.com:8080/path/to/file.html?param1=value1&param2=value2#fragment';

// 正規表現を作成
const regex = /^(?:https?:\/\/)?([^:\/\?#]+)(?:\:([0-9]+))?(\/[^\?#]*)(\?(.*))?(#(.*))?$/;

// 正規表現と URL 文字列を照合
const match = regex.exec(urlString);

// グループを使用して情報を取得
if (match) {
  const hostname = match[1];
  const port = match[2];
  const pathname = match[3];
  const search = match[4];
  const hash = match[6];

  console.log('ホスト名:', hostname); // 出力: ホスト名: www.example.com
  console.log('ポート番号:', port); // 出力: ポート番号: 8080
  console.log('パス:', pathname); // 出力: パス: /path/to/file.html
  console.log('クエリ文字列:', search); // 出力: クエリ文字列: ?param1=value1&param2=value2
  console.log('ハッシュフラグメント:', hash); // 出力: ハッシュフラグメント: #fragment
} else {
  console.error('URL の解析に失敗しました');
}

説明

URL オブジェクトを使用する 方法は、最もシンプルでわかりやすい方法です。URL オブジェクトには、ホスト名、パス、クエリ文字列などのプロパティがあり、それらを直接アクセスすることができます。

正規表現を使用する 方法は、より複雑な URL を解析する場合や、URL の特定の部分のみを抽出したい場合に役立ちます。正規表現は、パターンに一致する文字列を検索する強力なツールです。

• 上記のコードは、基本的な例です。実際のアプリケーションでは、エラー処理や追加機能などを実装する必要があります。
• URL の解析には、URLSearchParams オブジェクトや decodeURIComponent() 関数などの他のツールも使用できます。

JavaScript で URL を解析するその他の方法

URLSearchParams インターフェースは、URL のクエリ文字列を操作するための専用 API です。クエリ文字列とは、URL の ? の後に続く部分で、パラメータと値のペアで構成されています。

このインターフェースを使用すると、以下の操作を実行できます。

• クエリ文字列全体を取得する
• 特定のパラメータの値を取得する
• 新しいパラメータを追加する

const url = new URL('https://www.example.com/search?q=javascript&param2=value2');
const searchParams = url.searchParams;

// クエリ文字列全体を取得
console.log(searchParams.toString()); // 出力: q=javascript&param2=value2

// 特定のパラメータの値を取得
const value1 = searchParams.get('q');
console.log('q パラメータの値:', value1); // 出力: q パラメータの値: javascript

// 新しいパラメータを追加
searchParams.append('param3', 'value3');
console.log(searchParams.toString()); // 出力: q=javascript&param2=value2&param3=value3

// 既存のパラメータを変更
searchParams.set('param2', 'newValue2');
console.log(searchParams.toString()); // 出力: q=javascript&param2=newValue2&param3=value3

// パラメータを削除
searchParams.delete('param2');
console.log(searchParams.toString()); // 出力: q=javascript&param3=value3

DOMParser は、HTML や XML を解析するための API です。URL を解析するために直接使用することはできませんが、URL エンコードされた文字列をデコードするために使用できます。

const encodedString = 'https%3A%2F%2Fwww.example.com%2Fpath%2Fto%2Ffile.html';
const decodedString = new DOMParser().parseFromString(`<a href="${encodedString}">`).querySelector('a').href;
console.log(decodedString); // 出力: https://www.example.com/path/to/file.html

сторонние библиотеки

URL の解析を容易にするために、いくつかのサードパーティ製のライブラリが用意されています。

これらのライブラリは、追加機能やユーティリティを提供することが多く、複雑な URL の解析に役立つ場合があります。

長所と短所

それぞれの方法の長所と短所を比較します。

JavaScript で URL を解析するには、さまざまな方法があります。状況に応じて最適な方法を選択してください。

• シンプルでわかりやすい方法が必要な場合は、URL オブジェクトまたは location オブジェクトを使用します。
• クエリ文字列を操作する必要がある場合は、URLSearchParams インターフェースを使用します。
• 複雑な URL を解析する必要がある場合は、正規表現を使用します。
• URL エンコードされた文字列をデコードする必要がある場合は、DOMParser を使用します。
• 追加機能やユーティリティが必要な場合は、サードパーティ製のライブラリを使用します。