JavaScript:URLのハッシュ(#)以降を削除する

イントロダクション

JavaScriptで現在のページの URL を取得する場合に、location.href を使用します。
location.href では、URL にハッシュ(#)が含まれている場合には、ハッシュを含んだものを取得します。

従って、ハッシュを含まない URL を取得したい場合には、いろいろな方法により処理を行う必要があります。

方法はいくつかありますが、今回は正規表現による置換により、ハッシュ以降の文字列を削除した URL を生成したいと思います。

コード

var url = "http://upa-pc.blogspot.jp/2014/05/blogger-javascript-prev-next-title-2.html#more";
var new_url = url.replace(/#.*$/,"");

(2015/2/13 追記)
※ 以前は、location.href を replace したコードを掲載していましたが、location.href には少し問題があることがわかったため、URLを文字列とした場合のサンプルコードに差し替えました。


location.href の問題については、以下のページを参照してください。

JavaScript:location.hrefの注意点 - URLのドメイン前にベーシック認証が埋め込める、そして脆弱性
http://upa-pc.blogspot.com/2015/02/javascript-location-href-url-basic-trouble.html


現在ブラウザで表示している Web ページのハッシュ(#)を含まない URL を取得したい場合には、以下のページを参照してください。

JavaScript:ハッシュ(#)を含まない現在のページのURLを取得する - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2015/02/javascript-url-hash-delete-location.html

結果

上記のコードにより URL の文字列が、

http://upa-pc.blogspot.jp/2014/05/blogger-javascript-prev-next-title-2.html#more

の場合には、#more が削除された、

http://upa-pc.blogspot.jp/2014/05/blogger-javascript-prev-next-title-2.html

という文字列を取得できます。

まとめ

以上のコードにより、URL からハッシュ以降を削除した文字列を取得することが出来ました。

JavaScript により、ページの URL によって何らかの処理を行っている場合には、ハッシュの有り無しによって処理の結果が異なることの無いようにしたい場合には、こういう処理を検討する必要がありそうです。

location の値を扱う上での注意

URL には、Webページの制作者が予期していない文字列を渡される可能性があります。

特に、URL のハッシュ(#)やクエリ文字列(?)部には、第三者が（多少の制限はあるとはいえ）好きなように文字を設定できてしまいます。

そのため、location から取得した URL に対して、JavaScript によって何らかの処理を行う場合には、セキュリティ上の問題を引き起こさないように考慮する必要があります。

特に、それらの値をそのまま document.write で書き出したり、document.innerHTML に設定したりすることは非常に危険です。

その結果、Web ページにアクセスしたユーザの情報が盗まれたり、悪意のあるサイトへ誘導されたりといった危険性があります。

そのような考慮が無く、セキュリティ上の脆弱性のある Web ページを作ってしまった場合には、第三者が細工を施した URL をメールや、Web 上の掲示板などのページに張り付けることで、そのページにアクセスした人のブラウザで危険な動作をさせることが可能です。

location の値の使用目的に応じて、適切なセキュリティ対策を施してください。

（この辺りの話については、後日別の投稿で詳しく説明したいと思います。）