• HOME > 
  • Javascript > 
  • jQuery(Javascript)でURLの取得を行う方法...

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

投稿日:

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

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

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

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

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

jQueryと素のJavascriptのそれぞれ

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

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

attrメソッドの書き方

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

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

URL全体【href】

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

jQuery

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

ホスト(ドメイン名)【host】

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

jQuery

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

プロトコル【protocol】

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

jQuery

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

パス【pathname】

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

jQuery

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

パラメーター【search】

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

jQuery

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

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

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

jQuery

$(function(){
    var result = $(location).attr("hash");
    console.log(result);
    //結果は#sectionA
});
リンク先のサムネイル画像
jQueryでidを取得する方法【attrメソッドの使い方】

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

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

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

locationオブジェクトの書き方

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

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

URL全体【href】

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

Javascript

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

ホスト(ドメイン名)【host】

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

Javascript

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

プロトコル【protocol】

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

Javascript

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

パス【pathname】

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

Javascript

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

パラメーター【search】

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

Javascript

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

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

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

Javascript

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

まとめ

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

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

関連する記事

サムネイル

jQueryのblurでフォーカスが外れた時の処理を行う方法……

2023年05月01日
最終更新日:2023年05月31日
jQueryのblur()メソッドはフォームの入力ボックスなどでフォーカスが外れたときに処理を実行させることができるメソッドです。
サムネイル

jQueryのinArray()で配列内を検索する方法【要素……

2023年05月01日
最終更新日:2023年05月31日
jQueryのinArrayメソッドは、配列の中に特定の要素が含まれているかどうかを検索することができるメソッドです。
サムネイル

JavascriptのindexOfで文字列を検索する方法【……

2023年05月01日
最終更新日:2023年05月31日
indexOfメソッドを使用すると、テキストや配列の中に指定の文字列が含まれているかどうかを検索することができます。条件分岐に利用することで、ある文字が含まれている時といない時とで処理を分けることが可能になります。
サムネイル

jQueryのclosest()で最も近い親要素を取得する方……

2023年05月01日
最終更新日:2023年04月17日
jQueryのclosest()は、要素から最も近い親要素を取得(指定)できるメソッドです。要素の親要素を辿っていき、該当するセレクターを持つものを見つけ出してくれます。
サムネイル

jQueryのprop()メソッドで属性値を取得・設定する方……

2023年04月04日
prop()は要素の属性値を取得したり、追加・変更することができるメソッドです。attrメソッドとの違いには「返り値が異なる」といった点があります。
サムネイル

jQueryでラジオボタンの値を取得や操作する方法【チェック……

2023年04月04日
jQueryを使えばHTMLのラジオボタンでユーザーが選択した(チェックされた)値を取得・操作することができます。propメソッドを使用して行います。
サムネイル

jQueryでaタグのhref(リンク先)を書き換える方法【……

2023年04月04日
最終更新日:2023年05月31日
aタグのhref(リンク先のURL)を書き換えたい場合は、attrメソッドを使用します。リンク先のURLの一部だけを書き換えたい時は、replaceメソッドで文字の置き換えを実行してからattrメソッドで書き換えるという方法になります。