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

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:

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

ハッシュ（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

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

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