JavaScriptでURLを取得

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

JavaScriptでURLを取得する方法ですが、全部を取得するだけでなく、http://の部分やホスト(ドメイン)、?以降のパラメータやページ内リンクで付いた#のハッシュ値など、さまざまな取得方法をご紹介します。

 

現在のURLは以下で想定しています。

https://flatflag.nir87.com/dev/test.php?id=321#id

URL全体を取得する

基本構文

location.href

locationの後に取得したいプロパティを設定します。hrefはURL全文を取得します。

URLを表示させるサンプル

コンソールログに現在のURLを表示させてみましょう。

結果(コンソール)

https://flatflag.nir87.com/dev/test.php?id=321#id

https://から最後のパラメータまで、URLが全て表示されました。

参考:コンソールログを使ったデバッグ方法

URLの一部分のみを取得

次にURLの一部分のみを取得します。

構文

ホスト名(ドメイン)

flatflag.nir87.com

location.hostにはポート番号も含まれます。

オリジン(プロトコルを含めたドメイン)

https://flatflag.nir87.com

プロトコル

https:

ドメイン以下のパス

/dev/test.php

パラメータ

?id=321

ハッシュ(アンカー)

#id

ポート

:8080

locationの中身を確認

locationのプロパティと値を一気に確認することもできます。

コンソールログに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”
​…(略)

上記のようにhostpathnameなどが並び、その後にURLの値が吐き出されていますね。

それらhostpathnameなどのプロパティを、locationの後に.(ドット)で繋げて値を取っています。

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメント

  1. tnn より:

    こちらのサイトさん、基礎のところから解説してくださるのでとてもわかり易いです。

    意外にも、jsやphpの初心者向け解説が少ないので助かっています。今後もお願いいたします。:)

    1. flatFlag より:

      お役に立てたようで何よりです。とても励みになります。
      今後ともよろしくお願いいたします。

コメントを残す

*