Home
JavaScript
jQueryでURLやパラメータを取得する方法【location】

jQueryでURLやパラメータを取得する方法【location】

公開日
2022.02.05
更新日
2022.04.02
jQueryでURLやパラメータを取得する方法【location】

どうも!かけちまるです!

jQueryで現在表示中のサイトURLを取得する方法をご紹介します。
URLを取得できればif文でページ毎に処理を変えたりできます。

URLだけでなくパスやパラメータなど別の値も取得できます。

この記事では、

  • ・JavaScriptでURLの情報を取得する色々な方法
  • ・jQueryでURLの情報を取得する方法
  • ・URL毎に処理を分ける方法

がわかります。

JavaScriptでURLの情報を取得する

jQueryでもJavaScriptのLocationオブジェクトが使えるので「location.プロパティ」でURLの様々な情報が取得できます。

取得した情報をもとにif文を使ってページ毎に処理を変えることができるというわけです。

この記事では、次のURLから情報を取得することを想定します。
http://127.0.0.1:5502/index.html?page=2#pagetop

JavaScript
コピー
// URLの取得 let url = location.href; console.log('url: '+url); // 結果:http://127.0.0.1:5502/index.html?page=2#pagetop // パスの取得 let path = location.pathname; console.log('path: '+path); // 結果:/index.html // ホスト名とポート番号の取得 let host = location.host; console.log('host: '+host); // 結果:127.0.0.1:5502 // ホスト名のみの取得 let hostname = location.hostname; console.log('hostname: '+hostname); // 結果:127.0.0.1 // ポート番号のみの取得 let port = location.port; console.log('port: '+port); // 結果:5502 // プロトコルの取得 let protocol = location.protocol; console.log('protocol: '+protocol); // 結果:http: // パラメーターの取得 let search = location.search; console.log('search: '+search); // 結果:page=2 // ページ内アンカー(#~)の取得 let hash = location.hash; console.log('hash: '+hash); // 結果:#pagetop

jQueryでURLの情報を取得する

LocationオブジェクトはJavaScriptにデフォルトで存在するオブジェクトでした。

LocationオブジェクトでもURLの情報は取得できますがjQueryで取得したい場合はattr()メソッドを使うことで同じように情報を取得できます。

プロパティはLocationオブジェクトと同じで「$(location).attr('プロパティ');」で取得できます。

この記事では、次のURLから情報を取得することを想定します。
http://127.0.0.1:5502/index.html?page=2#pagetop

JavaScript
コピー
// URLの取得 let url = $(location).attr('href'); console.log('url: '+url); // 結果:http://127.0.0.1:5502/index.html?page=2#pagetop // パスの取得 let path = $(location).attr('pathname'); console.log('path: '+path); // 結果:/index.html // ホスト名とポート番号の取得 let host = $(location).attr('host'); console.log('host: '+host); // 結果:127.0.0.1:5502 // ホスト名のみの取得 let hostname = $(location).attr('hostname'); console.log('hostname: '+hostname); // 結果:127.0.0.1 // ポート番号のみの取得 let port = $(location).attr('port'); console.log('port: '+port); // 結果:5502 // プロトコルの取得 let protocol = $(location).attr('protocol'); console.log('protocol: '+protocol); // 結果:http: // パラメーターの取得 let search = $(location).attr('search'); console.log('search: '+search); // 結果:page=2 // ページ内アンカー(#~)の取得 let hash = $(location).attr('hash'); console.log('hash: '+hash); // 結果:#pagetop

取得した情報をもとに分岐する

URLの情報を元にページによって処理を分岐する方法をいくつか紹介します。

この記事では、次のURLから情報を取得することを想定します。
http://127.0.0.1:5502/index.html?page=2#pagetop

普通にif文で分岐する

JavaScript
コピー
if (location.pathname == "index.html"){ // 実行する処理 }

パスの最初の文字を元に分岐する

例ではswitch文を使っていますがif文でも大丈夫です。

JavaScript
コピー
let path = location.pathname.split("/")[1]; // 結果:index.html switch(path){ case 'imdex.html': // 実行する処理 break; default: // デフォルトの処理 }

URLに特定の文字列が入っている時に分岐する

JavaScript
コピー
if(location.href.match('index.html')) { // 実行したい処理 }

まとめ

記事を読んでわかるようにサイトのURLは割と簡単に取得できるのです。
これを使ってheaderのカレント表示なんかもできそうですね。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。
Xserver

関連記事

画像の読み込み進度を%表示するオープニングアニメーション

画像の読み込み進度を%表示するオープニングアニメーション

【Macユーザー向け】ngrokでローカル環境のサイトを外部へ公開

【Macユーザー向け】ngrokでローカル環境のサイトを外部へ公開

【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

【videoタグ】HTMLでWebサイトに動画を埋め込む

【videoタグ】HTMLでWebサイトに動画を埋め込む

Contact Form7の入力エラー表示をCSSのみでカスタマイズ

Contact Form7の入力エラー表示をCSSのみでカスタマイズ

【基本】Local by FlywheelでWordPressをローカルに構築する

【基本】Local by FlywheelでWordPressをローカルに構築する