目次?
イントロダクション
ハッシュ(#)を 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
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
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 の詳細は以下のページをご覧ください。
String.prototype.replace() - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/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
http://upa-pc.blogspot.jp/2014/05/javascripturl.html
この方法の場合、URL が location オブジェクトに収められていなくても使えるため、汎用的に使用できます。
コメントを投稿 (ここをクリックしてコメント投稿フォームを表示)
この記事について、わからなかった点・もっと知りたい点などはございませんか?
それらについてコメントフォームに記載して頂ければ、今後の記事へ反映させていきたいと思います。
コメントは各種アカウントを保有していなくても行えます。
このブログの運営者へのみメッセージを伝えたい場合には、contactより、メッセージを送信してください。