JavaScriptでURLをデコードするdecodeURIメソッドとdecodeURIComponentメソッドの使い方

エンコード(≒エスケープ(無害化)) された文字列をエンコードされる前の状態に戻すにはデコード処理を行う必要があります。

例えば、「 %E4%BB%8A%E6%97%A5%E3%81%AF%E8%89%AF%E3%81%84%E5%A4%A9%E6%B0%97%20 」をデコードすると「今日は良い天気」となります。

また、encodeURI()でエンコードされた文字列はdecodeURI()で、encodeURIComponent()でエンコードされた文字列はdecodeURIComponent()でデコードしてあげなければいけない点に注意してください。

構文

メソッド意味返り値
decodeURI(文字列)文字列をデコードする文字列
decodeURIComponent(文字列) 文字列をデコードする 文字列
decodeURI() decodeURIComponent()メソッド

サンプルコード

Output
デコード前の文字列 %E4%BB%8A%E6%97%A5%E3%81%AF%E8%89%AF%E3%81%84%E5%A4%A9%E6%B0%97%20
デコード後の文字列(decodeURIComponent)
Pug
.container.my-5
	div#timer
		div#second
	table.table
		tr
			th デコード前の文字列
			td %E4%BB%8A%E6%97%A5%E3%81%AF%E8%89%AF%E3%81%84%E5%A4%A9%E6%B0%97%20
		tr
			th デコード後の文字列(decodeURIComponent)
			td#targetText
CSS
.wp-block-ug-codedemo-output {
 word-break: break-word;
}
JavaScript
const targetText = document.getElementById( 'targetText' );
targetText.textContent = decodeURIComponent('%E4%BB%8A%E6%97%A5%E3%81%AF%E8%89%AF%E3%81%84%E5%A4%A9%E6%B0%97%20');
インストラクター
コメント

コメントを残す