JavaScriptでURLを取得する方法ですが、全部を取得するだけでなく、http://の部分やホスト（ドメイン）、?以降のパラメータやページ内リンクで付いた#のハッシュ値など、さまざまな取得方法をご紹介します。
現在のURLは以下で想定しています。
https://flatflag.nir87.com/dev/test.php?id=321#id
URL全体を取得する
基本構文
location.href
locationの後に取得したいプロパティを設定します。hrefはURL全文を取得します。
URLを表示させるサンプル
コンソールログに現在のURLを表示させてみましょう。
|
1 2 |
// コンソールログにURLを表示 console.log(location.href); |
結果（コンソール）
https://flatflag.nir87.com/dev/test.php?id=321#id
https://から最後のパラメータまで、URLが全て表示されました。
URLの一部分のみを取得
次にURLの一部分のみを取得します。
構文
ホスト名（ドメイン）
|
1 2 |
location.host; location.hostname; |
flatflag.nir87.com
location.hostにはポート番号も含まれます。
オリジン（プロトコルを含めたドメイン）
|
1 |
location.origin; |
https://flatflag.nir87.com
プロトコル
|
1 |
location.protocol; |
https:
ドメイン以下のパス
|
1 |
location.pathname; |
/dev/test.php
パラメータ
|
1 |
location.search; |
?id=321
ハッシュ（アンカー）
|
1 |
location.hash; |
#id
ポート
|
1 |
location.port; |
:8080
locationの中身を確認
locationのプロパティと値を一気に確認することもできます。
コンソールログにlocationの中身を表示させてみましょう。
|
1 2 |
// コンソールログにlocationの中身を表示 console.log(location); |
結果（コンソールログ）
Location https://flatflag.nir87.com/dev/test.php?id=321#id
assign: function assign()
hash: “#id”
host: “flatflag.nir87.com”
hostname: “flatflag.nir87.com”
href: “https://flatflag.nir87.com/dev/test.php?id=321#id”
origin: “https://flatflag.nir87.com”
pathname: “//dev/test.php”
port: “”
protocol: “https:”
reload: function reload()
replace: function replace()
search: “?id=321”
…（略）
上記のようにhostやpathnameなどが並び、その後にURLの値が吐き出されていますね。
それらhostやpathnameなどのプロパティを、locationの後に.（ドット）で繋げて値を取っています。
こちらのサイトさん、基礎のところから解説してくださるのでとてもわかり易いです。
意外にも、jsやphpの初心者向け解説が少ないので助かっています。今後もお願いいたします。:)
お役に立てたようで何よりです。とても励みになります。
今後ともよろしくお願いいたします。