【超便利】JavaScriptでURLのハッシュフラグメントを取得して、動的にコンテンツを切り替え

2024-06-01

JavaScript で URL からハッシュフラグメントを取得する方法

https://example.com/page.html#fragment

ハッシュフラグメントは、ページ内の特定の場所へ移動したり、データを渡したりするために使用されます。

JavaScript でハッシュフラグメントを取得するには、以下の方法があります。

location.hash プロパティを使用する

最も簡単な方法は、location.hash プロパティを使用することです。このプロパティには、現在の URL のハッシュフラグメントが格納されています。

const fragment = location.hash;
console.log(fragment); // #fragment

URLSearchParams オブジェクトを使用する

より詳細な情報が必要な場合は、URLSearchParams オブジェクトを使用することができます。このオブジェクトには、URL のクエリパラメータとハッシュフラグメントの情報が格納されています。

const url = new URL(window.location.href);
const fragment = url.hash;
console.log(fragment); // #fragment

jQuery を使用している場合は、以下のコードを使用してハッシュフラグメントを取得することができます。

const fragment = $(location).attr('hash');
console.log(fragment); // #fragment

補足

ハッシュフラグメントには、# 記号を含めないで取得することができます。
ハッシュフラグメントが存在しない場合は、空文字 ('') が返されます。

例

以下のコードは、ハッシュフラグメントの内容を基にページ内の要素を表示・非表示を切り替えます。

const fragment = location.hash;

if (fragment === '#section1') {
  $('#section1').show();
  $('#section2').hide();
} else if (fragment === '#section2') {
  $('#section1').hide();
  $('#section2').show();
} else {
  $('#section1').show();
  $('#section2').show();
}

この例では、#section1 というハッシュフラグメントが存在する場合は #section1 要素のみを表示し、#section2 というハッシュフラグメントが存在する場合は #section2 要素のみを表示します。ハッシュフラグメントが存在しない場合は、両方の要素を表示します。

location.hash プロパティを使用する

// URL: https://example.com/page.html#fragment

const fragment = location.hash;
console.log(fragment); // #fragment

URLSearchParams オブジェクトを使用する

// URL: https://example.com/page.html#fragment

const url = new URL(window.location.href);
const fragment = url.hash;
console.log(fragment); // #fragment

jQuery を使用する

// URL: https://example.com/page.html#fragment

const fragment = $(location).attr('hash');
console.log(fragment); // #fragment

// URL: https://example.com/page.html#section1

const fragment = location.hash;

if (fragment === '#section1') {
  $('#section1').show();
  $('#section2').hide();
} else if (fragment === '#section2') {
  $('#section1').hide();
  $('#section2').show();
} else {
  $('#section1').show();
  $('#section2').show();
}

説明

上記のコードは、いずれの方法でもハッシュフラグメント #fragment を取得します。
3番目の例では、jQuery を使用してハッシュフラグメントを取得しています。
4番目の例では、ハッシュフラグメントの内容に基づいて #section1 と #section2 要素の表示・非表示を切り替えています。

上記のコードはあくまで一例であり、状況に合わせて変更する必要があります。
ハッシュフラグメントを使用する前に、存在するかどうかを確認する必要があります。
ハッシュフラグメントの内容は、URL エンコードされている可能性があることに注意する必要があります。

JavaScript で URL からハッシュフラグメントを取得するその他の方法

正規表現を使用する

const url = 'https://example.com/page.html#fragment';
const match = url.match(/#(.*)/);

if (match) {
  const fragment = match[1];
  console.log(fragment); // fragment
} else {
  console.log('ハッシュフラグメントが見つかりません');
}

History API を使用する

window.addEventListener('popstate', (event) => {
  const fragment = new URL(event.url).hash;
  console.log(fragment); // fragment
});

正規表現: 上記のコードは、正規表現を使用して URL からハッシュフラグメントを抽出します。/#(.*)/ という正規表現は、# 記号の後に続く任意の文字列をグループ化します。
History API: 上記のコードは、popstate イベントを使用して、ブラウザの履歴が変化したときにハッシュフラグメントを取得します。new URL(event.url).hash によって、現在の URL のハッシュフラグメントを取得します。