JavaScript での URL の操作

ジョー・アタルディ作✏️

URL はあらゆる Web アプリにとって重要な部分です。アプリが API にリクエストを行う場合は、これらのリクエストに対して正しい URL を作成することが重要です。最新のすべてのブラウザでサポートされている URL API は、URL を解析して操作する方法を提供します。これにより、URL のさまざまな部分に簡単にアクセスできます。

URL の各部分を理解する

次の URL について考えてみましょう:

https://example.com/api/search?query=foo&sort=asc#results

この URL は次のコンポーネントで構成されています:

• プロトコル: https
• ホスト: example.com
• パス名: /api/search
• クエリ文字列: ?query=foo&sort=asc
• ハッシュ: #results

最新の JavaScript を使用すると、URL を解析し、必要に応じてこれらのさまざまな部分を抽出できます。

URLの解析

URL API が利用可能になる前の古いブラウザでは、開発者が URL を解析する方法の 1 つは を使用することでした。要素。この要素は、いくつかの基本的な URL 解析を提供します。たとえば、URL からクエリ文字列を抽出する方法は次のとおりです。

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

ただし、このアプローチにはいくつかの欠点があります。

• DOM 環境が必要です。つまり、Node.js などの環境では動作しません
• また、エラー処理もありません。無効な URL が href 属性に渡された場合でも、エラーはスローされません

正規表現を使用して URL のさまざまな部分を解析することもできますが、これは面倒でエラーが発生しやすくなります。

URL API を使用して URL を解析するのは簡単です。解析したい URL を URL コンストラクターに渡すだけです。 URL 文字列が有効な場合は、URL のさまざまな部分のプロパティを含む URL オブジェクトが返されます。

const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar

クエリ文字列の解析

次の 2 つの方法で URL のクエリ文字列にアクセスできます。

• 検索プロパティ。完全なクエリ文字列 (? 文字を含む) を含む文字列です
• URLSearchParams オブジェクトである searchParams プロパティ

クエリ文字列内の特定のパラメータの値に興味がある場合は、その get メソッドを使用して名前でパラメータを取得できます。

const url = new URL('https://example.com/api/search?query=foobar&maxResults=10');
console.log(url.searchParams.get('query'); // foobar
console.log(url.searchParams.get('maxResults'); // 10

同じ名前のパラメータが複数ある場合は、getAll を使用して、その名前のすべての値を含む配列を取得できます。

const url = new URL('https://example.com/api/search?tag=tag1&tag=tag2&tag=tag3');
console.log(url.searchParams.getAll('tag')); // ['tag1', 'tag2', 'tag3']

クエリ文字列の構築

クエリ文字列を手動で構築するのは、特にクエリ パラメータにエスケープする必要がある特殊文字が含まれている場合には、難しい場合があります。たとえば、クエリ パラメーターに & 文字を含める必要がある場合は、それを & としてエンコードする必要があります。これらの状況をカバーするには、encodeURIComponent 関数を使用する必要があります:

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

URLSearchParams オブジェクトを使用すると、クエリ文字列をより安全に作成できます。

const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar

URLSearchParams を使用する利点は次のとおりです。

• パラメータを区切る & 文字について心配する必要はありません
• パラメータ値を URI エンコードする必要はありません
• 文字列連結を使用する必要はありません

クエリパラメータの反復処理

URLSearchParams オブジェクトがないと、クエリ文字列内のパラメーターを反復処理するのが少し難しくなります。文字列を数回分割する必要があります。最初にキーと値のペアのグループに分割し、次にキーと値を再度分割します。

const url = new URL('https://example.com/api/search?query=foobar&maxResults=10');
console.log(url.searchParams.get('query'); // foobar
console.log(url.searchParams.get('maxResults'); // 10

パラメータにエンコードされた文字が含まれる可能性がある場合は、それらをデコードする必要もあります。

const url = new URL('https://example.com/api/search?tag=tag1&tag=tag2&tag=tag3');
console.log(url.searchParams.getAll('tag')); // ['tag1', 'tag2', 'tag3']

代わりに、URLSearchParams のエントリ メソッドを使用して、キーと値のペアを反復処理できます。

let queryString = 'foo=bar';
queryString += '&baz=qux';
queryString += '&tag=' + encodeURIComponent('one&two');
console.log(queryString); // foo=bar&baz=qux&tag=one%26two

完全な URL の構築

ベース URL といくつかのクエリ パラメーターを使用して URL を構築する完全な例を次に示します。

const params = new URLSearchParams();
params.append('foo', 'bar');
params.append('baz', 'qux');
params.append('tag', 'one&two');
console.log(params.toString()); // foo=bar&baz=qux&tag=one%26two

有効な URL を確認する

正規表現を使用して URL を検証することもできますが、有効な URL 文字列を完全に捕捉する正規表現を作成するのは非常に難しいことで知られています。

代わりに、URL API を使用できます。 URL コンストラクターに無効な URL を指定すると、エラーがスローされます。これを使用して、URL が有効かどうかを確認できます:

function listQueryParams(queryString) {
  queryString.split('&').forEach(param => {
    const [key, value] = param.split('=');
    console.log(`${key}: ${value}`);
  });
}

新しいブラウザでは、これがさらに簡単になります。 1 行のコードで同様の検証を実行する新しい URL.canParse 静的メソッドがあります。上記の isValidURL 関数と同様に、この関数は潜在的な URL 文字列を受け取り、URL 文字列の有効性に応じて true または false を返します。

相対 URL の作成

URL API には、相対 URL を解決するための強力なメカニズムがあります。通常、URL コンストラクターの引数が完全な有効な URL でない場合、エラーがスローされます。ただし、相対 URL を構築するためのベースとして機能する 2 番目の引数を指定できます。 2 つの引数を使用するアプローチを使用する場合、最初の引数は有効な URL である必要はありませんが、2 番目の引数は有効な URL である必要があります。

まず簡単なケースを見てみましょう:

function listQueryParams(queryString) {
  queryString.split('&').forEach(param => {
    const [key, value] = param.split('=');
    console.log(`${key}: ${decodeURIComponent(value)}`);
  });
}

URL コンストラクターは、https://example.com のベース URL を取得し、相対パス /about を追加し、https://example.com/about になります。

これはどうでしょうか:

function listQueryParams(queryString) {
  const params = new URLSearchParams(queryString);
  params.entries().forEach(([key, value]) => console.log(`${key}: ${value}`));
}

これは https://example.com/users/profile であると予想されるかもしれませんが、実際には https://example.com/profile になります。これは相対リンクと同じように動作します。 example.com のルートである親パス セグメントを取得し、プロファイルを追加します。

相対 URL の使用例をもう 1 つ見てみましょう。 .. を使用してパス階層を上に戻すこともできます:

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

これは https://example.com/profile に表示されます。相対 URL は親パス セグメントから始まることに注意してください。次に、これには .. が含まれており、パス セグメントをもう 1 つ上に進みます。

相対 URL を使用して URL コンストラクターを呼び出し、ベース URL に無効または不完全な URL を指定すると、エラーが発生します。完全なベース URL なしで相対 URL を使用すると、エラーが発生します:

const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar

window.location オブジェクトの操作

現在のページの URL を表す window.location オブジェクトに精通しているかもしれません。このオブジェクトには、href や pathname などのプロパティもあるため、URL オブジェクトであると思われるかもしれません。これは別のオブジェクトである Location で、URL と共通のプロパティがいくつかありますが、一部のプロパティ (searchParams プロパティなど) も欠落しています。

URL オブジェクトではない場合でも、window.location を使用して新しい URL オブジェクトを構築できます。 window.location を URL コンストラクターに渡して、現在の URL に基づいて searchParams などを使用して新しい完全な URL を作成することも、相対 URL を構築するときにそれをベース URL として使用することもできます:

const url = new URL('https://example.com/api/search?query=foobar&maxResults=10');
console.log(url.searchParams.get('query'); // foobar
console.log(url.searchParams.get('maxResults'); // 10

URLPattern を使用した URL 内のパターンの一致

URL を使用すると、URL からパスを簡単に取得できます。たとえば、URL https://example.com/api/users/123/profile の場合、パス名は /api/users/123/profile です。この URL からユーザー ID 123 だけを取得したい場合はどうすればよいでしょうか?

前に説明したように、URL の一部を検証して抽出するための適切な正規表現を作成するのは難しい場合があります。

まだすべてのブラウザで利用できるわけではありませんが、URLPattern API を使用すると、指定したパターンに一致する URL の一部を照合および抽出できます。これは、シングルページ アプリケーション (SPA) でのクライアント側のルーティングなどに特に役立ちます。

例としてユーザー プロファイル URL を使用して、ユーザー ID を取得するための URLPattern を作成してみましょう。先頭の : 文字を使用して名前付きプレースホルダーを示すことができ、これを後で URL のその部分と一致させるために使用できます:

const url = new URL('https://example.com/api/search?tag=tag1&tag=tag2&tag=tag3');
console.log(url.searchParams.getAll('tag')); // ['tag1', 'tag2', 'tag3']

URLPattern で exec を呼び出す場合は、有効な URL が必要です。 URL の各部分 (プロトコル、ホスト、パス名など) のプロパティを含むマッチャー オブジェクトを返します。これらの各プロパティには、:userId などのプレースホルダー名を URL 内の値にマップする groups プロパティもあります。

ここで行ったようにパス名など、URL の一部の一致のみを考慮する場合は、URL パターンでワイルドカードを指定することもできます。または、URL 文字列の代わりに、一致させたい URL の部分を含むオブジェクトを渡すこともできます:

let queryString = 'foo=bar';
queryString += '&baz=qux';
queryString += '&tag=' + encodeURIComponent('one&two');
console.log(queryString); // foo=bar&baz=qux&tag=one%26two

URLPattern API はまだすべてのブラウザで利用できるわけではありません。この記事の執筆時点では、Firefox や Safari ではまだサポートされていません。最新のブラウザ サポート情報は CanIUse.com でご覧いただけます。

まとめ

URL API は、JavaScript で URL を構築、検証、操作するための多用途インターフェイスです。手動による解析や正規表現よりも安全で、エラーが発生しにくくなります。 URLSearchParams オブジェクトを使用すると、文字列の連結や特殊文字のエンコードを気にせずにクエリ文字列を作成できます。

URLPattern API はこれをさらに一歩進め、ワイルドカードと名前付きプレースホルダーをサポートしているため、アプリのニーズに合わせて URL を細かく分割できます。 さらに読む:

• URL インターフェース (MDN)
• URLPattern API (MDN)

---

LogRocket の最新のエラー追跡を数分でセットアップできます。

1. https://logrocket.com/signup/ にアクセスしてアプリ ID を取得します。
2. NPM またはスクリプト タグを介して LogRocket をインストールします。 LogRocket.init() はサーバー側ではなくクライアント側で呼び出す必要があります。

NPM:

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

スクリプトタグ:

const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar

3.(オプション) スタックとのより深い統合のためのプラグインをインストールします:

• Redux ミドルウェア
• ngrx ミドルウェア
• Vuex プラグイン

今すぐ始めましょう

以上がJavaScript での URL の操作の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。