HTML 与 JS 字符串互转

功能

• 两个方向：HTML → JS 字符串、JS 字符串 → HTML
• 自动判断方向（以 < 开头当 HTML，以引号开头当 JS 字符串），也可手动指定
• 默认把 `</` 打断成 `<\/`，防止 `</script>` 提前闭合脚本标签
• 三种引号：单引号、双引号、反引号（反引号模式会额外转义 `${` 与反引号本身）
• 三种输出形态：纯字符串、`const html = …`、`document.write(…)`
• 换行、制表符、反斜杠、行分隔符 U+2028/U+2029 全部转义
• 反向解析支持 `\n` `\t` `\xHH` `\uHHHH` `\u{…}` 与行尾续行
• 不认识的转义原样保留（粘进来的可能是一段正则）

使用方法

1. 粘贴 HTML 代码，或一段带引号的 JS 字符串
2. 方向留「自动判断」，或手动指定
3. 选引号与输出形态，结果实时更新
4. 复制走结果 —— 它是能直接粘进代码的

常见问题

为什么要把 </ 改成 <\/？

因为 HTML 解析器在 `<script>` 标签里只找源码里有没有 `</script` 这个字符序列，不看它是不是在 JS 字符串里。所以一段内嵌的 HTML 只要包含 `</script>`，脚本标签就会在那里被提前闭合：剩下的 JS 变成页面上的文字，报错也不指向真正的原因。`\/` 在 JS 字符串里与 `/` 是同一个值，所以打断它不改变任何结果 —— 这是唯一一个「改源码、不改值」的办法。

选单引号还是双引号？

看内容。HTML 属性通常用双引号（`class="btn"`），所以把 HTML 放进单引号字符串里要转义的字符少得多，可读性也好；这是默认选单引号的原因。反引号（模板字符串）看着最干净，但代价是要额外转义 `${`（否则会被当成插值）与反引号本身。

自动判断方向是怎么判的？

只有一条判据：去掉空白后是不是以 `<` 开头 —— 那说明输入是标签。反过来「像不像一个转义过的 JS 字符串」太难判，任何文本都可能像，而猜错的后果是把你的正文当成代码去反转义（`\n` 两个字符变成真换行），改完还看不出哪里不对。所以只有一边能猜，另一种情况请手动指定。

为什么有些转义不被处理？

反向解析只处理 JS 里有明确定义的转义：`\n` `\t` `\b` `\f` `\v` `\0`、`\xHH`、`\uHHHH`、`\u{…}`、以及引号与反斜杠本身。不认识的（比如 `\d`、`\q`）原样保留反斜杠而不是丢掉 —— 你粘进来的可能是一段正则，丢掉反斜杠会让 `\d` 变成 `d`，而那是另一个意思。