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」

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

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

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

まとめ

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