JavaScript

最終更新日:
公開日:

レシピ

URL

URLからドメイン、パス、プロトコル、GETパラメータなど各種情報を取得する

URLからドメインや現在のパス、プロトコル、ハッシュ、GETパラメータなどを取得する方法について解説します。

この記事のポイント

  • 通信プロトコルが「http」か「https」を取得するときはprotocolプロパティを参照する
  • ドメイン名のみ取得するときはhostnameプロパティを参照する
  • ドメイン以降のパスを取得するときはpathnameプロパティを参照する

URLから各種データを取得する

URLからドメインやパス、ハッシュ、通信プロトコルが「http」か「https」かなどを取得したいときは、URLオブジェクトの各プロパティを参照します。

index.js

// https://gray-code.com/test/index.html#section1 からURLオブジェクトを作成
var uri = new URL(window.location.href);

console.log(uri.hash); // #section1
console.log(uri.hostname); // gray-code.com
console.log(uri.protocol); // https:

用意されているプロパティと取得できる値は以下のものになります。

プロパティ名取得する値
hashURLの末尾につく#以降のハッシュ、アンカー
hostドメインを取得。ドメイン名の後ろに「:8080」などポート番号がついている場合は一緒に取得
hostnameドメインを取得
hrefハッシュやパラメータを含めたフルURLを取得
originルートURLを取得
pathnameドメイン以降のパスを取得
portURLに含まれるポート番号を取得
protocolhttp」「https」などのプロトコルを取得
searchURLの末尾につく?以降のGETパラメータを取得
searchParamsURLの末尾につく?以降のGETパラメータをURLSearchParamsとして取得
passwordドメインの前に指定されたパスワードを取得
usernameドメインの前に指定されたユーザー名を取得

ハッシュ(hash)とGETパラメータ(search)が混在するURLについては、全てハッシュ(hash)に含まれてしまうため注意が必要です。
以下の例はGETパラメータやユーザー名、パスワードを除いたURLで各プロパティの値を出力します。

index.js

// https://gray-code.com:4000/test/index.html#section1 からURLオブジェクトを作成
var uri = new URL(window.location.href);

console.log(uri.hash); // #section1
console.log(uri.host); // gray-code.com:4000
console.log(uri.hostname); // gray-code.com
console.log(uri.href); // https://gray-code.com:4000/test/index.html#section1
console.log(uri.origin); // https://gray-code.com:4000
console.log(uri.pathname); // /test/index.html
console.log(uri.port); // 4000
console.log(uri.protocol); // https:

最初にURLオブジェクトのインスタンスを作成します。
インスタンスを作成するときにパラメータでURLを渡す必要がありますが、ここではwindow.location.hrefから現在開いているページのURLが入るように指定します。
例では「https://gray-code.com:4000/test/index.html#section1」のURLをセットしています。

URLにGETパラメータが含まれるときは次のように取得することができます。

index.js

// https://gray-code.com/test/index.html?id=4&username=taro からURLオブジェクトを作成
var uri = new URL(window.location.href);

console.log(uri.search); // ?id=5&username=taro
console.log(uri.searchParams.get("id")); // 4
console.log(uri.searchParams.get("username")); // taro

searchプロパティ?以降の全てのパラメータを取得し、searchParamsプロパティgetメソッドは指定したパラメータの値を個別に取得することができます。

先述の通り、以下のようにハッシュとGETパラメータが混在するURLはhashプロパティに全ての値が入ります。
GETパラメータの値をsearchプロパティsearchParamsプロパティから個別に取得することはできないため注意が必要です。

index.js

// https://gray-code.com/test/index.html#section1?id=4 からURLオブジェクトを作成
var uri = new URL(window.location.href);

console.log(uri.hash); // #section1?id=5
console.log(uri.search); // (空)
console.log(uri.searchParams.get("id")); // null

URLにユーザー名やパスワードが含まれているときは、それぞれ以下のコードのようにプロパティから取得することができます。

index.js

// https://taro:password@gray-code.com/test/index.html からURLオブジェクトを作成
var uri = new URL(window.location.href);

console.log(uri.username); // taro
console.log(uri.password); // password

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。