HTML entity encoder/decoderの使い方｜タグを文字として表示する

今回の仕上がり

Mathias Bynens様のHTML entity encoder/decoderは、HTMLの文字参照へ変換したり、元の文字へ戻したりするツールです。今回はタグの形をした文字列と日本語、アンパサンドを入力しました。出力をブラウザでデコードすると、元の入力と一致しました。

HTML本文に記号を文字として置く場面の確認に使えます。JavaScriptの文字列を作る前回のツールとは、出力を使う場所が違います。

操作手順

1. 公式ツールを開きます。
2. 「Decoded」の欄に<b>猫 & dog</b>と入力します。
3. 「Encoded」の欄に、<などの文字参照が現れることを確かめます。
4. 出力を保存する際は、元の文字列と用途も一緒に残します。

今回の既定設定では、山括弧が文字参照になり、日本語の猫は猫になりました。登録・支払いは求められませんでした。画面は実際に入力して取得したものです。

注意点と確認範囲

変換はHTMLを安全に実行するための万能な処理ではありません。属性、URL、JavaScriptなどでは必要な扱いが異なります。単なる文字表示なら、自作画面ではtextContentを使う方法もあります。外部入力をそのままinnerHTMLへ渡す設計は、このツールの紹介では推奨しません。

公式ソースとMITライセンス全文を確認しました。元の著作権・許諾表示を保持します。共有用permalinkに入力が含まれるため、秘密は入力せず、今回は投稿・共有もしていません。通信全体の安全性やすべての入力は未検証です。