JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでURLを解析する方法とは？DOMを使った簡単なURLパースの実装

JavaScriptにおけるURLの解析（パース）方法

JavaScriptでURLを解析する場合、正規表現を使うよりもDOMメソッドを活用する方がはるかにシンプルです。正規表現でURLを分解しようとすると、コードは複雑になりがちですが、DOMメソッドなら関数を1回呼び出すだけで解析済みのURL（パース済みURL）を取得できます。

DOMメソッドによるURL解析の仕組み

以下の例では、まず関数を作成し、その内部でDOMメソッドを使ってアンカータグ「a」を生成しています。次に、引数として渡されたURLを、アンカータグのhref属性に代入します。ブラウザはhrefに設定されたURLを自動的に解析し、プロトコルやホスト名などの各要素をアンカー要素のプロパティとして保持してくれます。そのため、関数が返すオブジェクトからURLの各構成要素（パース済みの部分）をそのまま取り出せるのです。

最後に、解析結果を見やすく表示するためにJSON.stringify()メソッドを使用して、オブジェクトを文字列化して出力しています。

サンプルコード

<html>
<body>
<script>
   function URL(url) {
      var urlParser = document.createElement('a');
      urlParser.href = url;
      return {
         protocol: urlParser.protocol,
         host: urlParser.host,
         hostname: urlParser.hostname,
         port: urlParser.port,
         pathname: urlParser.pathname,
         search: urlParser.search,
         hash: urlParser.hash
      };
   }
   document.write(JSON.stringify(URL("https://www.youtube.com/watch?v=tNJJSrfKYwQ")));
</script>
</body>
</html>

実行結果

{"protocol":"https:","host":"www.youtube.com","hostname":"www.youtube.com","port":"","pathname":"/watch","search":"?v=tNJJSrfKYwQ","hash":""}

取得できるURLの構成要素

  • protocol：通信プロトコル（例：https:）
  • host：ホスト名＋ポート番号
  • hostname：ホスト名のみ
  • port：ポート番号（省略されている場合は空文字）
  • pathname：パス部分（例：/watch）
  • search：クエリ文字列（?以降の部分）
  • hash：フラグメント識別子（#以降の部分）

補足：モダンな環境ではURL APIも利用可能

なお、近年のブラウザでは標準のURLコンストラクタ（URL API）を使うことで、同様の解析をより簡潔に実現できます。new URL("https://example.com/path")のように記述するだけで、上記と同じプロパティ（protocol、hostname、pathnameなど）を持つオブジェクトが取得できます。ただし、古いブラウザへの対応が必要な場合には、この記事で紹介したDOM（アンカー要素）を使った手法が依然として有効です。

  1. JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説

    JavaScriptでは、標準組み込みのURLコンストラクタを使うことで、URL文字列からURLオブジェクトを簡単に生成できます。URLオブジェクトを作成すると、プロトコル（protocol）やホスト名（host）、パス（pathname）など、URLを構成する各要素に個別にアクセスできるようになるため、URLの解析や操作がとても便利になります。 URLオブジェクトの作成例 以下は、JavaScriptでURLオブジェクトを作成し、ボタンをクリックするとその各プロパティを画面に表示するサンプルコードです。 <!DOCTYPE html> <html lang="

  2. JavaScriptの配列を文字列に変換する方法【toString()の使い方を解説】

    JavaScriptで配列の要素をひとつの文字列として扱いたい場面はよくあります。そんなときに便利なのがtoString()メソッドです。このメソッドを使うと、配列の各要素がカンマ（,）で区切られたひとつの文字列に変換されます。以下は、ボタンをクリックすると配列の中身が文字列として画面に表示されるシンプルなサンプルコードです。サンプルコード<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-