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

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

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

JavaScript コード例

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

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

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

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

JavaScript コード例

// https://gray-code.com:4000/test/index.html#section1 からURLオブジェクトを作成
let 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パラメータが含まれるときは次のように取得することができます。

JavaScript コード例

// https://gray-code.com/test/index.html?id=4&username=taro からURLオブジェクトを作成
let 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プロパティから個別に取得することはできないため注意が必要です。

JavaScript コード例

// https://gray-code.com/test/index.html#section1?id=4 からURLオブジェクトを作成
let 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にユーザー名やパスワードが含まれているときは、それぞれ以下のコードのようにプロパティから取得することができます。

JavaScript コード例

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

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