わたしが体験・気になったコンピュータ関係の情報のまとめ

Dr.ウーパのコンピュータ備忘録

Dr.Upa's notebook about computer informations.
メインテーマ:Windows / Blogger / Programming / Computer / Security / Network / Android / Game / News /
表示形式:

2015年2月12日木曜日

JavaScript:ハッシュ(#)を含まない現在のページのURLを取得する

>> 関連記事へ

イントロダクション

ハッシュ(#)を URL に付与して、Web ページ内の特定のアンカーにジャンプするようにすることができます。

これは非常に便利な機能ですが、現在表示している Web ページの URL を基に、JavaScript などで何らかの処理を行う場合には、この URL のハッシュ(#)を考慮していないと困ったことが起こったりします。

URL にハッシュ(#)が付与されていると、同じWebページを示しているURLなのに、単純な文字列比較では別の Web ページのように見えてしまうからです。


今回は、現在ブラウザで表示している Web ページの URL にハッシュが(#)が付与されている場合でも、ハッシュ(#)を含まない URL が取得できる方法について考えてみることにします。



ハッシュ(#)を含まない現在のページのURLを取得する

現在ブラウザで表示している Web ページの URL は location オブジェクトに収められています。

window.location - Web API インターフェイス | MDN
https://developer.mozilla.org/ja/docs/Web/API/window.location

document.location - Web API インターフェイス | MDN
https://developer.mozilla.org/ja/docs/Web/API/document.location


location オブジェクトからどのような情報を取得できるのかは、上記の window.location に詳しく記載されています。


location オブジェクトのプロパティには、ハッシュ(#)を含まないURLをズバリ取得するためのものはありませんが、複数のプロパティを組み合わせることで、ハッシュ(#)を含まないURLを生成することができます。

考え方としては、location オブジェクトの各プロパティを組み立てて、ハッシュ(#)を含まないURLを生成する方法と、location オブジェクトの完全なURL(href)から、ハッシュ(#)部分を削除することで、ハッシュ(#)を含まないURLを生成する方法の 2 つがあります。

location オブジェクトの各プロパティを組み立てて、ハッシュ(#)を含まないURLを生成

location オブジェクトの各プロパティを組み立てて、ハッシュ(#)を含まないURLを生成するには、次の JavaScript コードを使用します。

JavaScript コード:
var new_url = location.protocol + "//" + location.host + location.pathname + location.search;



実際の URL を使用して、ハッシュ(#)が含まれないURLが生成で来たかどうかをチェックしてみましょう。


テストに使用するURL:
http://upa-pc.blogspot.jp/2015/02/pc-life-good-items.html?m=1#more

実行結果:
new_url : "http://upa-pc.blogspot.jp/2015/02/pc-life-good-items.html?m=1"


location オブジェクトの完全なURL(href)から、ハッシュ(#)部分を削除することで、ハッシュ(#)を含まないURLを生成

location オブジェクトの完全なURL(href)から、ハッシュ(#)部分を削除することで、ハッシュ(#)を含まないURLを生成には、次の JavaScript コードを使用します。


JavaScript コード:
var new_url = location.href.replace(location.hash,"");



実際の URL を使用して、ハッシュ(#)が含まれないURLが生成で来たかどうかをチェックしてみましょう。


テストに使用するURL:
http://upa-pc.blogspot.jp/2015/02/pc-life-good-items.html?m=1#more

実行結果:
new_url : "http://upa-pc.blogspot.jp/2015/02/pc-life-good-items.html?m=1"


replace の詳細は以下のページをご覧ください。



まとめ

以上の方法を使用することにより、ハッシュ(#)を含まないURLを生成することができました。


2 つの方法を紹介しましたが、特に理由がないのなら、複雑性の少ない「location オブジェクトの完全なURL(href)から、ハッシュ(#)部分を削除することで、ハッシュ(#)を含まないURLを生成」する方法が良いのではないかと思います。

「location オブジェクトの各プロパティを組み立てて、ハッシュ(#)を含まないURLを生成」では、URL を生成するために、プログラムの要素として変数が 4 つ、定数が 1 つ、演算子が 4 つの計 9 つ必要です。

一方、「location オブジェクトの完全なURL(href)から、ハッシュ(#)部分を削除することで、ハッシュ(#)を含まないURLを生成」では、変数が 2 つ、定数が 1 つ、メソッドが 1 つのの計 4 つで済みます。


この、ハッシュ(#)を含まない現在のページのURLを取得する JavaScript コードを利用する場合には、そのような点に注意しつつ、活用してみてください。


そのほかの手段

文字列の正規表現による置換により、URLのハッシュ(#)以降を取り除いた文字列を取得する方法もあります。

JavaScript:URLのハッシュ(#)以降を削除する - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2014/05/javascripturl.html


この方法の場合、URL が location オブジェクトに収められていなくても使えるため、汎用的に使用できます。


コメントを投稿 (ここをクリックしてコメント投稿フォームを表示)

この記事について、わからなかった点・もっと知りたい点などはございませんか?
それらについてコメントフォームに記載して頂ければ、今後の記事へ反映させていきたいと思います。

コメントは各種アカウントを保有していなくても行えます。
このブログの運営者へのみメッセージを伝えたい場合には、contactより、メッセージを送信してください。