HTML と JS 文字列の相互変換

機能

• 双方向：HTML → JS 文字列、JS 文字列 → HTML
• 方向を自動判別（`<` で始まれば HTML、引用符で始まれば JS 文字列）。手動指定も可能
• 既定で `</` を `<\/` に分断し、`</script>` による早期終了を防ぎます
• 引用符は3種類：シングル・ダブル・バッククォート（バッククォートでは `${` とバッククォート自体も追加でエスケープ）
• 出力の形は3種類：文字列のみ、`const html = …`、`document.write(…)`
• 改行・タブ・バックスラッシュ・行区切り U+2028 / U+2029 をエスケープ
• 解除側は `\n` `\t` `\xHH` `\uHHHH` `\u{…}` と行末の継続に対応
• 未知のエスケープはバックスラッシュを残します（正規表現を貼った可能性があるため）

使い方

1. HTML コード、または引用符付きの JS 文字列を貼り付けます
2. 方向は「自動判別」のままか、手動で指定します
3. 引用符と出力の形を選ぶと、結果がリアルタイムで更新されます
4. 結果をコピー —— そのままコードに貼れます

よくある質問

なぜ </ を <\/ にするのですか？

`<script>` タグの中では、HTML パーサーはソースに `</script` という文字列があるかどうかだけを見て、それが JS の文字列の中かどうかは判断しないからです。そのため埋め込んだ HTML に `</script>` が含まれていると、そこでタグが閉じられ、残りの JS がページ上の文字になり、エラーは本当の原因を指しません。JS の文字列では `\/` と `/` は同じ値なので、分断しても出力は変わりません —— ソースだけを変えて値を変えない唯一の方法です。

シングルクォートとダブルクォートのどちらを使うべきですか？

中身次第です。HTML の属性は通常ダブルクォート（`class="btn"`）なので、HTML をシングルクォートの文字列に入れるとエスケープがずっと少なくて済み、読みやすくなります。既定がシングルなのはそのためです。バッククォート（テンプレートリテラル）は最もきれいに見えますが、`${`（補間と解釈される）とバッククォート自体の追加エスケープが必要です。

方向の自動判別はどう判断していますか？

判定は1つだけです：空白を除いて `<` で始まるかどうか。それはマークアップだと言えます。逆の「エスケープされた JS 文字列らしいか」は判別が難しく、ほとんどどんなテキストもそれらしく見えてしまいます。誤ると本文をコードとして解除してしまい（`\n` の2文字が本物の改行になる）、後から見ても分かりません。そこで片側だけを判別し、もう片方は手動指定にしています。

処理されないエスケープがあるのはなぜですか？

解除側は JS で意味が定義されているエスケープだけを扱います：`\n` `\t` `\b` `\f` `\v` `\0`、`\xHH`、`\uHHHH`、`\u{…}`、そして引用符とバックスラッシュ自身です。それ以外（`\d` や `\q`）はバックスラッシュをそのまま残します —— 正規表現を貼った可能性があり、落とすと `\d` が `d` になって別の意味になるからです。