encoding / url

URL パーサー

URLをプロトコル・ホスト名・パス・クエリパラメータ・ハッシュに分解して表示します。入力内容はサーバーに送信されません。

使い方

01
  1. 入力フィールドにURLを貼り付けてください（http:// または https:// から始まるURL）
  2. リアルタイムでプロトコル・ホスト名・ポート・パス・クエリパラメータ・ハッシュに分解されます
  3. クエリパラメータはキーと値に分けて一覧表示されます
  4. 各フィールドの「copy」ボタンで値をクリップボードにコピーできます

実装コード

02

ブラウザ標準の URL APIと URLSearchParams のみで実装。外部ライブラリ不要でそのままコピーして利用できます。

export type ParsedUrl = {
  protocol: string
  username: string
  password: string
  hostname: string
  port: string
  pathname: string
  search: string
  hash: string
  params: Array<{ key: string; value: string }>
}

export type ParseResult =
  | { ok: true; parsed: ParsedUrl }
  | { ok: false; error: string }

export function parseUrl(input: string): ParseResult {
  const trimmed = input.trim()
  if (!trimmed) return { ok: false, error: '' }

  try {
    const url = new URL(trimmed)
    const params: Array<{ key: string; value: string }> = []
    url.searchParams.forEach((value, key) => {
      params.push({ key, value })
    })
    return {
      ok: true,
      parsed: {
        protocol: url.protocol,
        username: url.username,
        password: url.password,
        hostname: url.hostname,
        port: url.port,
        pathname: url.pathname,
        search: url.search,
        hash: url.hash,
        params,
      },
    }
  } catch {
    return {
      ok: false,
      error: '無効なURLです。http:// または https:// から始まるURLを入力してください',
    }
  }
}

よくある使用例・注意点

03
クエリパラメータのデコード
URLSearchParams は自動的にパーセントエンコードされたクエリパラメータをデコードして返します。例えば ?q=%E6%97%A5%E6%9C%AC%E8%AA%9E は「日本語」として取得できます。生の %XX 表現が必要な場合は search プロパティを参照してください。
ハッシュ（#）の扱い
URLのハッシュ部分（# 以降）はサーバーに送信されず、ブラウザ側のみで処理されます。SPAのルーティングやページ内リンクに使われます。hash プロパティには # 記号を含んだ値が返ります（例：#section-1）。
ポート番号のデフォルト省略
http:// のデフォルトポートは80番、https:// は443番です。URLにこれらのデフォルトポートが省略されている場合、port プロパティは空文字列を返します。このツールでは空の場合「（デフォルト）」と表示します。
認証情報（username / password）の扱い
URLにはユーザー名・パスワードを埋め込む構文があります（例：https://user:pass@example.com）。現代のWebではほとんど使われませんが、FTPや内部ツールのURLで見かけることがあります。パスワードをURLに含めることはセキュリティ上推奨されません。

関連ツール

04
URLエンコード/デコードHTMLエスケープBase64エンコード

ソースコード

05

このツールのソースコード（テストコードを含む）はGitHubで公開しています。 MITライセンスで自由に利用・改変できます。

GitHub でコードを見る →