HTML エンティティエンコード / デコード

HTMLの文字参照（& & &）を相互変換。名前付き / 10進 / 16進、エスケープレベル切替、HTMLライブプレビュー、JS/CSS/URL併記でフロント実装の決定打。

レベル:

形式:

入力テキスト文字0byte0

出力（HTMLエンティティ）文字0変換0

プリセット:

HTMLとして実際にレンダリング（プレビュー）ダーク

他のエスケープ方式と並べて比較

JavaScript 文字列リテラル

—

CSS \\HEX エスケープ

—

URL エンコード (RFC 3986)

—

Unicode コードポイント

—

よく使う HTML エンティティ一覧（クリックで挿入）

文字	名前付き	10進	16進	説明

HTMLエンティティとは

HTMLエンティティ（文字参照）は、< や & のようにHTMLで特別な意味を持つ文字を、構文として解釈されないように記述するための仕組みです。<（名前付き）、<（10進数値参照）、<（16進数値参照）の3形式があり、本ツールはすべて相互に変換できます。

エスケープレベルの使い分け:

・最小: & < > " ' のみ変換。HTML本文への埋め込みに最適。
・特殊文字: 上記＋等のHTML/XML特殊文字。XML出力やAttribute値に。
・非ASCII: ASCII外の文字をすべて数値参照化。古い環境や非UTF-8の文書に。
・全文字: あらゆる文字を文字参照に。コードの難読化・obfuscation検証に。

HTMLエンティティ vs URLエンコード vs Base64: HTML文書内に<script>などを「テキストとして」表示したいときはHTMLエンティティ。URLパス・クエリは%XX形式のURLエンコード。バイナリの安全な転送はBase64。本ツールは右側のカードに3形式を併記し、用途を間違えないよう支援します。

XSS対策: ユーザー入力をHTMLに埋め込む際は最低限& < > " 'を必ずエンティティ化してください。属性値の場合は"と'のエスケープが特に重要です。

すべての変換はブラウザ内で完結します。テキストはサーバーへ一切送信されません。

\nASCII外: 漢字・絵文字 🎉 も対応" : "HTMLエンティティを含むテキストを入力\n\n例: <p>© 2026 — Hello 🎉</p>"; scheduleUpdate(); }); }); document.querySelectorAll('#level-seg button').forEach(b => { b.addEventListener('click', () => { document.querySelectorAll('#level-seg button').forEach(x => x.classList.remove('active')); b.classList.add('active'); state.level = b.dataset.level; scheduleUpdate(); }); }); document.querySelectorAll('#format-seg button').forEach(b => { b.addEventListener('click', () => { document.querySelectorAll('#format-seg button').forEach(x => x.classList.remove('active')); b.classList.add('active'); state.format = b.dataset.format; scheduleUpdate(); }); }); $('btn-clear').addEventListener('click', () => { input.value = ''; scheduleUpdate(); input.focus(); }); $('btn-swap-io').addEventListener('click', () => { const o = output.value; // toggle mode and swap text const newMode = state.mode === 'encode' ? 'decode' : 'encode'; document.querySelector(`#mode-seg button[data-mode="${newMode}"]`).click(); input.value = o; scheduleUpdate(); }); $('btn-copy').addEventListener('click', async () => { try { await navigator.clipboard.writeText(output.value); flashBtn($('btn-copy'), 'コピー完了'); } catch { output.select(); document.execCommand('copy'); flashBtn($('btn-copy'), 'コピー完了'); } }); document.querySelectorAll('.copy[data-copy]').forEach(b => { b.addEventListener('click', async () => { const which = b.dataset.copy; const map = { js: 'out-js', css: 'out-css', url: 'out-url', cp: 'out-cp' }; const text = $(map[which]).textContent; if (!text || text === '—') return; try { await navigator.clipboard.writeText(text); flashBtn(b, '✓'); } catch {} }); }); function flashBtn(btn, msg) { const orig = btn.textContent; btn.textContent = msg; btn.classList.add('btn-active'); setTimeout(() => { btn.textContent = orig; btn.classList.remove('btn-active'); }, 1200); } $('toggle-preview-dark').addEventListener('click', () => { state.previewDark = !state.previewDark; $('toggle-preview-dark').classList.toggle('active', state.previewDark); preview.classList.toggle('dark', state.previewDark); }); // Presets const presets = { 'xss': { mode: 'encode', text: `\n

` }, 'html-fragment': { mode: 'encode', text: `

価格: 1,000円 < 1,500円 (税込み)

\nリンク` }, 'email': { mode: 'encode', text: `お客様各位\n\n「商品A」のご注文ありがとうございます。\n金額: ¥3,980（税込）\n配送状況は下記URLでご確認ください:\nhttps://example.com/order?id=12345&token=abc` }, 'emoji': { mode: 'encode', text: '🎉 おめでとう！ 🍣 寿司 🗾 日本 ⭐ 星 — 絵文字も対応' }, 'japanese': { mode: 'encode', text: '日本語テキストの例: ひらがな・カタカナ・漢字・記号「」『』【】〜！？' }, 'svg': { mode: 'encode', text: `` }, 'numeric-decode': { mode: 'decode', text: `ABC\n🎉あい\nAB&C` }, 'mixed': { mode: 'decode', text: `<p>© 2026 — Tech™Quant ‘Devtools’ — ¥980 ≤ price ≤ ¥1,980 & ©Open Source 🎉</p>` }, }; document.querySelectorAll('[data-preset]').forEach(b => { b.addEventListener('click', () => { const p = presets[b.dataset.preset]; if (!p) return; if (p.mode !== state.mode) { document.querySelector(`#mode-seg button[data-mode="${p.mode}"]`).click(); } input.value = p.text; scheduleUpdate(); input.focus(); }); }); // Reference table search $('ref-search').addEventListener('input', e => buildRefTable(e.target.value)); $('ref-tbody').addEventListener('click', e => { const cell = e.target.closest('[data-insert]'); if (!cell) return; const txt = cell.dataset.insert; // Insert at caret in the active textarea const t = state.mode === 'decode' ? input : input; const start = t.selectionStart || t.value.length; const end = t.selectionEnd || t.value.length; t.value = t.value.slice(0, start) + txt + t.value.slice(end); t.focus(); t.selectionStart = t.selectionEnd = start + txt.length; scheduleUpdate(); }); // Initial render buildRefTable(''); // Friendly default sample so preview is non-empty input.value = `

商品名: "Hello & World"

\nリンク\n価格: ¥1,980 — © 2026 🎉`; scheduleUpdate(); })();