変換モード

入力(HTML)

出力(エスケープ済み)

変更箇所のハイライト

変換すると、ここに差分が表示されます

変換対象の特殊文字

文字 エンティティ 説明
&&アンパサンド
<&lt;小なり(タグ開始)
>&gt;大なり(タグ終了)
"&quot;ダブルクォート
'&#39;シングルクォート

次にこちらのツールもいかがですか?

HTMLエスケープとは?なぜ必要なのか

HTMLエスケープとは、HTML文書内で特別な意味を持つ文字(<, >, &, ", ')を、対応する文字参照(エンティティ)に変換する処理です。

たとえば <script> をそのままHTMLに埋め込むと、ブラウザはそれをJavaScriptタグとして解釈してしまいます。エスケープによって &lt;script&gt; に変換すれば、ブラウザは単なるテキストとして安全に表示します。

XSS(クロスサイトスクリプティング)対策の基本

XSS攻撃は、WebセキュリティにおけるOWASP Top 10に常にランクインする深刻な脆弱性です。攻撃者がユーザー入力にスクリプトを仕込み、他のユーザーのブラウザで実行させる手法です。

これらすべてに共通する対策の基本が、出力時のHTMLエスケープ(サニタイズ)です。ユーザーから受け取ったデータをHTMLに埋め込む前に、必ず特殊文字をエスケープすることで、スクリプトの注入を防ぎます。

ソースコードをブログに掲載する手順

技術ブログやドキュメントにHTMLやJavaScriptのコードサンプルを掲載する場合、以下の手順でエスケープすると安全かつ正確に表示できます。

  1. 本ツールの「エスケープ」モードにソースコードをペースト
  2. 出力されたエスケープ済みテキストをコピー
  3. ブログの <pre><code> タグ内にペースト
  4. ブラウザで表示を確認 — <div> などのタグがそのままテキストとして表示されればOK

シンタックスハイライトライブラリ(Prism.js, highlight.js 等)を使用している場合でも、HTML内の <& はエスケープしておく必要があります。ライブラリがエスケープ済みテキストを正しく解釈し、色付けしてくれます。

エスケープが必要な5つの特殊文字

文字 エンティティ エスケープしないとどうなるか
& &amp; 後続の文字列がエンティティ参照として誤解釈される
< &lt; HTMLタグの開始として解釈され、ページ構造が崩れる
> &gt; HTMLタグの終了として解釈される可能性がある
" &quot; 属性値のクォートが閉じてしまい、属性の注入が可能になる
' &#39; シングルクォートで囲まれた属性値が壊れる

ブラウザ完結で安全に使えます

本ツールはすべての処理をブラウザ内の JavaScript だけで完結しています。入力されたテキストが外部サーバーに送信されることは一切ありません。社内システムのソースコードや未公開のHTMLテンプレートも安心して変換できます。

その他のツール

お探しのツールが見つからない場合は、BetaVersion Tools トップページから全ツールの一覧をご確認ください。広告運用・Web制作に役立つツールを随時追加しています。
\n リンク\n'; } else { inputEl.value = '<div class="alert">\n <p>注意: この値は &lt;未定義&gt; です。</p>\n <script>alert('XSS')</script>\n <a href="https://example.com?q=1&lang=ja">リンク</a>\n</div>'; } update(); }); // ── Copy ── btnCopy.addEventListener("click", () => { if (!outputEl.value) return; navigator.clipboard.writeText(outputEl.value).then(() => { btnCopy.textContent = "Copied!"; btnCopy.classList.add("copied"); setTimeout(() => { btnCopy.textContent = "出力をコピー"; btnCopy.classList.remove("copied"); }, 1500); }); }); // ── 入出力入れ替え ── btnSwap.addEventListener("click", () => { const currentOutput = outputEl.value; if (!currentOutput) return; // モードを反転 const mode = getMode(); const newMode = mode === "escape" ? "unescape" : "escape"; document.querySelector(`input[name="mode"][value="${newMode}"]`).checked = true; inputEl.value = currentOutput; update(); }); // ── リセット ── btnReset.addEventListener("click", () => { inputEl.value = ""; outputEl.value = ""; document.querySelector('input[name="mode"][value="escape"]').checked = true; inputEl.focus(); update(); }); // 初期化 update();