• Javascript

jQuery(Javascript)でURLの取得を行う方法【パスやパラメーターの取得】

投稿日:2023年04月04日

現在のページのURLを取得するには？

jQuery(Javascript)を使えば、現在表示しているWebページのURLやパラメーターを取得することができます。

URLが取得できれば、条件分岐によってページごとに処理を切り替えるといったことが実現可能になります。

このページでは、jQueryと素のJavascriptのそれぞれでURLの取得を行う方法を解説します。

jQueryの場合は「attrメソッド」、Javascriptの場合は「locationオブジェクト」を使用します。

【jQueryの場合】attrメソッドを使う

jQeuryで閲覧ページのURLを取得するには、attrメソッドを使用します。

指定するプロパティ名によって、URL全体であったりパスやパラメーターだけを限定して取得することができます。

以下では「http://sample.com/test.html?id=1#sectionA」を閲覧している場合を例として解説します。

URL全体【href】

プロパティ名に「href」を指定するとURL全体を取得できます。

$(function(){
    var result = $(location).attr("href");
    console.log(result);
    //結果はhttp://sample.com/test.html?id=1#sectionA
});

ホスト（ドメイン名）【host】

プロパティ名に「host」を指定するとホスト（ドメイン名）のみを取得できます。

$(function(){
    var result = $(location).attr("host");
    console.log(result);
    //結果はsample.com
});

プロトコル【protocol】

プロパティ名に「protocol」を指定するとプロトコルの部分のみを取得できます。

$(function(){
    var result = $(location).attr("protocol");
    console.log(result);
    //結果はhttp:
});

パス【pathname】

プロパティ名に「pathname」を指定するとパスの部分のみを取得できます。

$(function(){
    var result = $(location).attr("pathname");
    console.log(result);
    //結果は/test.html
});

パラメーター【search】

プロパティ名に「search」を指定するとパラメーターのみを取得できます。

$(function(){
    var result = $(location).attr("search");
    console.log(result);
    //結果は?id=1
});

ページ内リンクのアンカー【hash】

プロパティ名に「hash」を指定するとページ内リンクのアンカーの部分のみを取得できます。

$(function(){
    var result = $(location).attr("hash");
    console.log(result);
    //結果は#sectionA
});

attr()メソッドでID属性を取得する方法についてはこちらのページをご覧ください。

jQueryでidを取得する方法【attrメソッドの使い方】

jQueryでHTMLの要素に付与されているidを取得するためには「attr()」メソッドを使用します。attrメソッドは要素の属性を取得や変更、削除を行うことができるメソッドです...

【Javascriptの場合】locationオブジェクトを使う

jQueryにおいても素のJavascriptのlocationオブジェクトが利用可能です。こちらを使用した方が簡潔に取得できるかもしれません。

こちらも同様に指定するプロパティ名によって、URL全体であったりパスやパラメーターだけを限定して取得することができます。

以下では「http://sample.com/test.html?id=1#sectionA」を閲覧している場合を例として解説します。

URL全体【href】

プロパティ名に「href」を指定するとURL全体を取得できます。

$(function(){
    var result = location.href;
    console.log(result);
    //結果はhttp://sample.com/test.html?id=1#sectionA
});

ホスト（ドメイン名）【host】

プロパティ名に「host」を指定するとホスト（ドメイン名）のみを取得できます。

$(function(){
    var result = location.host;
    console.log(result);
    //結果はsample.com
});

プロトコル【protocol】

プロパティ名に「protocol」を指定するとプロトコルの部分のみを取得できます。

$(function(){
    var result = location.protocol;
    console.log(result);
    //結果はhttp:
});

パス【pathname】

プロパティ名に「pathname」を指定するとパスの部分のみを取得できます。

$(function(){
    var result = location.pathname;
    console.log(result);
    //結果は/test.html
});

パラメーター【search】

プロパティ名に「search」を指定するとパラメーターのみを取得できます。

$(function(){
    var result = location.search;
    console.log(result);
    //結果は?id=1
});

ページ内リンクのアンカー【hash】

プロパティ名に「hash」を指定するとページ内リンクのアンカーの部分のみを取得できます。

$(function(){
    var result = location.hash;
    console.log(result);
    //結果は#sectionA
});

まとめ

以上がjQuery(Javascript)でURLの取得を行う方法です。

jQueryを利用している場合においても、attrメソッドよりもlocationオブジェクトを使用した方が簡潔にURLを取得できるのでおすすめです。