• 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を取得できるのでおすすめです。

広告

関連する記事

サムネイル

横スクロール可能なことを示すヒントを表示するJavascri……

2023年09月01日
Javascriptのライブラリ「ScrollHint(スクロールヒント)」を使えば、ユーザーに対して要素がスクロール可能であることをわかりやすく示すアイコンを表示することができます。
サムネイル

JavascriptでブラウザやOSを判定する方法【plat……

2023年09月01日
Javascriptのplatform.jsというライブラリを利用すれば、簡単にユーザーが使用しているブラウザやOS情報を取得し判別する処理を作ることが可能です。
サムネイル

Javascriptでフォーム送信時に確認ダイアログを出す方……

2023年09月01日
Javascriptでフォーム送信時にダイアログ表示させてユーザーに処理を続行して良いか確認するには「confirmメソッド」と「onsubmit属性」の2つを使用します。
サムネイル

Javascriptで文字のUnicode(UTF-16)を……

2023年09月01日
最終更新日:2023年08月29日
JavascriptのcharCodeAtを使うと、日本語(テキスト)のUnicode(UTF-16)を取得したり、Unicode(UTF-16)をテキストに変換することが可能です。
サムネイル

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メソッドを使用すると、テキストや配列の中に指定の文字列が含まれているかどうかを検索することができます。条件分岐に利用することで、ある文字が含まれている時といない時とで処理を分けることが可能になります。