JavaScriptでURLのハッシュ(#)の値を取得したり、付与したりするlocation.hash()メソッドの使い方

URLからハッシュ(#)を取得して処理を分けたい

JavaScriptでURLについたハッシュ(#)の値を取得して、処理を振り分けたり、ページ内遷移に利用したりするときはlocation.hash()メソッドが便利です。

メソッド

メソッド意味返り値
history.hash()URLについたハッシュ(#)の値を取得する文字列
history.hash()メソッド

サンプルコード

サンプルコードとして、「更新」ボタンを押すと、入力欄の値を元にハッシュ値とそれが付与されたURLを出力するサンプルコードを紹介します。

値は英数にしてください。あくまでURL向けの文字列なので、日本語は無害化されます。

Output

Pug
textarea.textarea#targetText.w-100
	button#button.mb-4.text-center 更新
	p#currentHash
SCSS
#button {
	--background-color: #fff;
	--color: #576574;
	--transition: all 0.3s;
	margin-bottom: 10px;
	background-color: var(--background-color);
	padding: 10px;
	color: var(--color);
	border: 1px solid #576574;
	cursor: pointer;
	width: 120px;
	transition: var(--transition);
	&:hover {
		transition: var(--transition);
		color: var(--background-color);
		background-color: var(--color);
	}
}
JavaScript
const targetText = document.getElementById( 'targetText' );
const currentHash = document.getElementById( 'currentHash' );

// ボタンをクリックしたら予め用意していたonClickAction()関数を実行する
document.getElementById('button').addEventListener('click', onClickAction);
currentHash.textContent = `現在のハッシュ値は「${location.hash}」です。`;

/** ボタンをクリックと関数を実行 */
function onClickAction() {
	//コンファームを表示
	const checkConfirm = confirm('入力欄の文字をハッシュ値として付与してそのURLとハッシュ値を表示します。よろしいですか?'); 
	if ( checkConfirm ) {
		location.hash = targetText.value;
		currentHash.textContent = `現在のハッシュ値は「${location.hash}」です。URLは「${location.href}」です。`;
	}
}
インストラクター
コメント

コメントを残す