HTML Encoder

HTML Encoder / Decoder

`& < > " '` を安全な HTML エンティティへエスケープしたり、エンティティでエスケープされたテキストをプレーンに戻したり。Minimal、Named、Numeric、All non-ASCII の 4 つのエンコードレベル。UTF-8 + 絵文字 + CJK に対応し、すべてブラウザ内で動作。

デフォルトは Minimal — HTML 本文 / 属性コンテキストを壊す 5 文字 & < > " ' のみをエスケープします。これは現代のテンプレートエンジンが行っていることと同じです。著作権記号 / nbsp / 矢印などを (&#169; ではなく &copy; のように) 読みやすいコードで残したい場合は Named entities を使ってください。名前付きエンティティを理解しないかもしれないパイプラインに HTML を流すなら Numeric を。厳密に ASCII のみのシステム (レガシーなメールサーバー、不完全な API) を対象とする場合は All non-ASCII を使ってください。

&apos; は XML と HTML5 では有効ですが、HTML 4.01 では 有効ではありません — 古いブラウザでは ' という文字どおりのテキストとして表示されてしまいます。数値参照 &#39; はどこでも動作します。デコーダーは互換性のため &apos; も入力として受け付けます。

入力
出力

安全な HTML 出力のために設計

テンプレート向けにユーザーコンテンツをエスケープし、エンティティでエンコードされたデータをデコード — そして使うのが楽しくなる細やかな工夫もいくつか。

4 つのエンコードモード

Minimal は HTML で安全でない 5 つの文字 (& < > " ') のみをエスケープします — 通常のユーザー生成コンテンツに最適なデフォルトです。Named は &copy; / &nbsp; / &hearts; のように、対応する名前があれば読みやすい HTML5 エンティティを使います。Numeric はすべての非 ASCII コードポイントを &#NN; としてエンコードします。All non-ASCII は印字可能な ASCII 以外のすべてのコードポイントをエンコードし、レガシー / ASCII 専用のパイプラインに対応します。

あらゆるエンティティをデコード

デコーダーは名前付きエンティティ (&copy;)、10 進数値 (&#169;)、16 進数値 (&#xA9;) を扱えます。サロゲートペアのコードポイント (絵文字、古代文字) も UTF-16 を介して正しくラウンドトリップします。

ライブプレビュー

出力はキー入力ごとに更新されます — Encode / Decode ボタンを押す必要はありません。1 クリックで方向を切り替え可能。Swap ボタンで出力を入力に戻せるので、変換を連続させることができます。

UTF-8 + 絵文字 + CJK 対応

あらゆる Unicode コードポイントが正しくラウンドトリップします:中文、العربية、русский、हिंदी、🎉、Þorgeir。エンコーダーは charAt ではなくコードポイント単位で反復処理するため、サロゲートペアもそのまま保持されます。

プライバシー重視の設計

テキストは端末から外に出ません。エンコーダー、デコーダー、名前付きエンティティテーブルはすべてローカルの JavaScript として動作します。DevTools → Network を開けば外部リクエストがゼロであることを確認できます。

小さい + 速い

純粋な JavaScript、フレームワークのランタイムなし。コールドロードは gzip 後 25 KB 未満。100 KB の HTML ドキュメントを 5 ms 未満でエンコードします。

HTML エンティティのエンコード・デコード方法

生のテキストからエンティティセーフな出力までの 4 ステップ。

  1. 1

    テキストを貼り付け

    Input ペインにプレーンテキストや HTML をドロップしてください。何でも構いません — ユーザーコメント、ブログ記事、絵文字、CJK、RTL スクリプト。エンコーダーはコードポイント単位で反復するため、マルチバイトシーケンスもそのまま保持されます。

  2. 2

    方向 + モードを選択

    Direction を Encode (テキスト → エンティティ) または Decode (エンティティ → テキスト) に設定します。Encode の場合はモードを選んでください:テンプレート用には Minimal、読みやすいエンティティには Named、非 ASCII を &#NN; として出すには Numeric、ASCII のみの出力には All non-ASCII。

  3. 3

    ライブプレビューを確認

    出力はキー入力ごとに更新されます。ドロップダウンを切り替えてリアルタイムにモードを比較できます。Swap で出力を入力に戻すと、ラウンドトリップ検証 (encode → decode で元に戻る) に便利です。

  4. 4

    コピーまたはダウンロード

    コピーアイコンで結果をクリップボードに送るか、ダウンロードアイコンで output.encode.html / output.decode.txt として保存できます。サイズ差分 (入出力の文字数 / バイト数) を見れば、エンコードによって文字列がどれだけ膨らんだか縮んだかがひと目でわかります。

日々の Web 開発のために設計

プライバシー優先のブラウザ完結型ツールが、よくあるオンラインエンコーダーよりも有利になる 4 つのよくあるシナリオ。

ユーザーコンテンツをテンプレートに安全に埋め込む

ユーザーコメント、フォーム入力、検索クエリ — 外部から来て <p>、<li>、属性の中に入るあらゆるもの。Minimal モードのエンコードを通してから HTML に文字列連結すれば、マークアップが崩れることもなく、最も単純な XSS ペイロードからも守られます。

API からエンティティでエスケープされたデータを読む

一部の API はエンティティで既にエスケープされた文字列を返します (RSS フィード、特定の CMS エクスポート、スクレイピングした HTML)。貼り付けて Decode を押せば、元の Unicode が戻ってきます。デコーダーはサロゲートペアを含む名前付き、10 進、16 進エンティティに対応します。

メールの件名 + meta タグ

<title>、<meta name="description">、<meta property="og:title"> — どれも特殊文字にはエンティティエスケープが必要です。見出しを一度エンコードして、3 か所すべてに貼り付けてください。

サードパーティーサービスに渡せない機密コンテンツ

社内 CMS のコンテンツ、顧客データ、NDA で守られたテンプレート — クラウドのエンコーダーに貼れないあらゆるもの。ブラウザ完結型のツールなら、すべてのバイトがあなたの端末に留まります。DevTools → Network を開いて、何も外に出ていないことをご自分で確認してください。

100% プライベート — ブラウザ内で動作

テキストは端末から外に出ません。DevTools → Network を開けば、エンコードやデコード中に外部へのリクエストがゼロであることが確認できます。

  • エンコーダー、デコーダー、名前付きエンティティの参照テーブルは、すべてあなたのマシン上の JavaScript として動作します — サーバーサイドの変換も、サードパーティ API もありません。
  • サロゲートペアのコードポイント (絵文字、古代文字) はバイト単位ではなくコードポイント単位で扱われるため、🎉 を貼り付けてもラウンドトリップ後に 🎉 のままです。
  • ログインなし、テキスト内容に対するテレメトリなし。Cookie は同意状態用に 1 つ、言語設定用に 1 つだけ使用しています。

関連ガイド

HTML エスケープ、エンティティ表、安全なテンプレートに関する厳選記事。

よくあるご質問

どのモードを選べばいいですか?

デフォルトは Minimal — HTML 本文 / 属性コンテキストを壊す 5 文字 & < > " ' のみをエスケープします。これは現代のテンプレートエンジンが行っていることと同じです。著作権記号 / nbsp / 矢印などを (&#169; ではなく &copy; のように) 読みやすいコードで残したい場合は Named entities を使ってください。名前付きエンティティを理解しないかもしれないパイプラインに HTML を流すなら Numeric を。厳密に ASCII のみのシステム (レガシーなメールサーバー、不完全な API) を対象とする場合は All non-ASCII を使ってください。

なぜ `'` を `&apos;` ではなく `&#39;` としてエスケープするのですか?

&apos; は XML と HTML5 では有効ですが、HTML 4.01 では 有効ではありません — 古いブラウザでは ' という文字どおりのテキストとして表示されてしまいます。数値参照 &#39; はどこでも動作します。デコーダーは互換性のため &apos; も入力として受け付けます。

絵文字や CJK 文字は壊れずに残りますか?

はい。エンコーダーは UTF-16 のコードユニットではなくコードポイントを反復処理するため、🎉 (U+1F389) のような絵文字はエンコード時に &#127881; となり、デコード時にも正しくラウンドトリップします。CJK も同様です (Numeric モードで 中文 → &#20013;&#25991;)。

エンコード後にユーザー入力を直接 HTML に埋め込んでも安全ですか?

HTML 本文と属性については、Minimal モードであれば安全です。URL コンテキスト (href="...") では URL エンコード も必要になります。インラインの JavaScript や CSS については、HTML エンコードも URL エンコードも不十分です — それらのコンテキストを理解する適切なテンプレートエンジンを使ってください。エスケープしていないユーザー入力を <script> ブロックに貼り付けてはいけません。

サーバーに何か送信されますか?

いいえ。エンコーダー、デコーダー、名前付きエンティティの参照テーブルはすべて、お使いの端末上の JavaScript で動作します。DevTools → Network を開けば、エンコードやデコード中に外部へのリクエストがゼロであることを確認できます。シークレット、顧客データ、社内テンプレートを貼り付けても、何一つあなたの端末の外には出ません。