【JavaScript】location.hashで取得した値から#(ハッシュタグ)を取り除く方法

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptでlocation.hashで取得した値から#(ハッシュタグ)を取り除く方法をご紹介しています。

JavaScriptでlocation.hashで取得した値からハッシュタグを除いた文字列を取り出したいんだけど、良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

location.hashとは?

location.hashは、現在ブラウザで開いているページのURLからハッシュタグ以降の文字列を取得することができるlocationのプロパティです。

閲覧しているWebページのURLが下記とします。

https://into-the-program.com/#contact

この状態でlocation.hashをコンソール等に出力すると下記の値を取得することができます。

#contact

上記の通り、location.hashを使用すると、URL内のハッシュタグ以降の文字列を簡単に取得することができます。

location.hashで取得した値にはハッシュタグが付いていますので、ハッシュタグのみを取り除いて処理に組み込みやすいようにしてみます。

location.hashで取得した値からハッシュタグを取り除く

location.hashで取得した値は文字列として扱うことができます。そのため、Stringオブジェクトのslice()を使用して、ハッシュタグを取り除いた文字列を抽出する方法が有効です。(slice()は対象から任意に文字列を取り出すことができるメソッドです。)

location.hashで取得した値は1文字目がハッシュタグなので、2文字目以降の文字列をslice()で取り出します。slice()のインデックスは0から始まるため、2文字目以降の文字列を取り出したい場合は、引数に1を指定します。

const param = location.hash.slice(1);

paramをコンソールに出力してみます。

contact

これでlocation.hashで取得した値からハッシュタグを除いた文字列を取得することができます。

最後に

locationはWebページのURLに関する多くの情報を持つオブジェクトです。WebページのURLに関する情報であれば一通り揃っていますので、どんな値が取得できるか一通り覚えておくと、処理を実装する際に時短になるかもしれませんね。

以上、JavaScriptでlocation.hashで取得した値から#(ハッシュタグ)を取り除く方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら