← 機能一覧に戻る
Free

HTMLエンティティエンコーダー

HTMLエンティティエンコーダーは、特殊文字(< > & " ')を対応するHTMLエンティティ(&lt; &gt; &amp; &quot; &#39;)に、またその逆に変換します。ユーザーコンテンツの安全なレンダリング、ドキュメントへのコードの埋め込み、ユーザー入力表示時のXSS(クロスサイトスクリプティング)防止に不可欠なツールです。

HTMLタグをテキストとして表示したり、ページ内にコードスニペットを埋め込んだり、ユーザーが送信したコンテンツを安全に表示したりする必要がある場合、HTMLエンティティエンコーディングが解決策となります。このツールは、即座に双方向の変換を提供します。エンコードでは、HTMLの特殊文字をエンティティに置き換えることで、ブラウザがそれらをマークアップとして解釈せず、リテラルテキストとして表示するようにします。デコードはその逆のプロセスを行います。このツールは、5つの主要なXMLエンティティに加えて、数値文字参照(&#NN; および &#xHH;)も処理できるため、あらゆるエンコード済みコンテンツに対応可能です。リアルタイム変換により入力と同時に出力が表示され、入れ替えボタンで入出力を反転させて往復の検証を素早く行うことができます。

ライブプレビュー
example.com
HTML Entity Encoder Encode Decode
Input
<div class="box">Hello & welcome!</div>
Encoded Output
&lt;div class=&quot;box&quot;&gt;Hello &amp; welcome!&lt;/div&gt;
&lt; &gt; &amp; &quot; &#39;
主な機能

特殊文字のエンコード

< > & " ' を &lt; &gt; &amp; &quot; &#39; に変換します。これらは、テキストとして表示するためにエンコードが必要な5つの予約済みHTMLキャラクターです。

エンティティ参照のデコード

名前付き参照(&amp; &lt; &nbsp;)と数値参照(&#60; &#x3C;)の両方を、元の文字にデコードします。

ワンクリックコピー

エンコードまたはデコードの結果をワンクリックでコピーできます。出力をHTML、ドキュメント、またはソースコードにそのまま移動させることが可能です。

リアルタイム変換

入力するたびに出力がリアルタイムで更新されます。エンコードボタンをクリックする必要はなく、素早い試行錯誤が可能です。

数値エンティティに対応

10進数(&#65;)および16進数(&#x41;)の数値参照に加え、&amp;nbsp;、&amp;copy;、&amp;trade; などの名前付きエンティティをサポートしています。

往復検証

エンコードした結果をさらにデコードして、出力がオリジナルと一致するか確認します。コンテンツを安全に処理できているかを素早く検証する方法です。

主な活用例

ドキュメントへのコード埋め込み

MarkdownやHTMLページの中でHTMLタグをリテラルテキストとして表示するために、特殊文字をエンコードします。コードサンプルが意図せずマークアップとして実行されてしまうのを防ぎます。

XSSの防止

ユーザーの入力をページにそのまま出力する前に、HTMLエンティティをエンコードして <script> タグやその他のインジェクションベクトルを無力化します。

不正な形式のHTMLのデバッグ

不審な出力の中にあるエンティティ参照をデコードして、実際にどのような文字が生成されているかを確認します。エスケープ関連のバグの特定に役立ちます。

コンテンツの移行

特定のシステム(CMS、メールテンプレートなど)からのエンティティを含むHTMLを、別のシステム(データベースフィールド、プレーンテキストメールなど)用にプレーンテキストに変換します。

ツールチップと属性の安全性

HTML属性(title="..."、data-* など)にコンテンツを挿入する前にエンコードし、引用符や特殊文字が属性の構造を壊さないようにします。

使い方
1

HTMLエンティティツールを開く

DevSuite Pro of ドックでHTMLエンティティアイコンをクリックします。エンコードとデコードの切り替えができるエディタパネルが開きます。

2

HTMLまたはテキストを貼り付ける

エンコードしたい文字列(テキストとして表示したい生のHTML)またはデコードしたい文字列(レンダリングが必要なエンティティを含むコンテンツ)を貼り付けます。

3

モードを選択

特殊文字をエンティティにするには「エンコード」、エンティティを元の文字に戻すには「デコード」を選択します。

4

結果を確認

エンコードまたはデコードされた出力が隣のペインに即座に表示されます。長い入力はスクロール可能で、デフォルトで折り返されます。

5

結果をコピー

「コピー」をクリックして出力を取得します。ドキュメント、コードサンプル、またはユーザー向けページに貼り付けて、安全にレンダリングします。

試してみませんか? HTMLエンティティエンコーダー?

DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。

Chrome に追加 Edgeに追加 Firefox に追加