レシピ

ブラウザ

URIからハッシュを取得する

最終更新日：2023-06-05
公開日：2020-05-12

URIからハッシュを取得する方法について解説します。

この記事のポイント

URIに含まれる「#」をhashプロパティから取得する
URIを全て取得するときはhrefプロパティを参照する

URIにある「#」を取得する

URIからハッシュを参照するにはLocationオブジェクトのhashプロパティを参照することで取得できます。

ハッシュの取得例

ハッシュを取得するコードは以下のようになります。

JavaScript コード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>JS Test</title>
  <script>
    window.addEventListener('load', (event) => {

      // ハッシュ値を取得
      let hash = location.hash;
      console.log(hash);
    });
  </script>
</head>
<body>
<h1>JS Test</h1>
<div id="content1">コンテンツ1</div>
<div id="content2">コンテンツ2</div>
<div id="content3">コンテンツ3</div>
</body>
</html>

ハッシュを含めた全てのURIを取得したい場合は、同じLocationオブジェクトのhrefプロパティを参照してください。

URIの取得例

JavaScript コード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>JS Test</title>
  <script>
    window.addEventListener('load', (event) => {

      // URIを取得
      let uri = location.href;
      console.log(uri);
    });
  </script>
</head>
<body>
  <h1>JS Test</h1>
  <div id="content1">コンテンツ1</div>
  <div id="content2">コンテンツ2</div>
  <div id="content3">コンテンツ3</div>
</body>
</html>

関連記事