HTML转JS字符串

输出不是“执行结果”，而是 JavaScript 源码

一段多行 HTML 不能原样塞进普通单引号或双引号字符串：与定界符相同的引号会提前结束字符串，反斜杠也会参与转义，物理换行还需要拼接或行继续语法。转换器读取每一行 HTML，先把原有反斜杠写成双反斜杠，再转义所选定界引号，最后生成可复制的 JavaScript 文本。

页面有两种输出方式。字符串变量模式以 var html = 开头，多行默认用 + 连接；打开“行尾添加反斜杠”后，会在每个非末行末尾追加反斜杠。document.write 模式实际生成的是每行一条 document.writeln(...);。转换结果可复制，也可下载为 converted.js。

引号开关究竟会改动什么

“使用单引号”开启时，外层定界符是单引号，HTML 中的单引号会被反斜杠转义，而双引号保持原样；关闭后规则相反。无论选择哪种定界符，原输入中的反斜杠都会先转义，避免它与后面的字符组成意外的 JavaScript 转义序列。

按目标代码选择转换设置

1. 粘贴 HTML 或载入示例

   左侧编辑区接受多行文本。示例按钮会填入一段 HTML；清空按钮只移除输入。

2. 确定输出模式

   要得到一个变量，选择“字符串变量”；需要核对旧代码中的逐行写入形式，选择 document.writeln。后者不会显示“行尾添加反斜杠”开关。

3. 选择外层引号

   HTML 属性大多使用双引号时，可保留默认单引号，减少输出中的转义符；原文单引号较多时可关闭开关，改用双引号定界。

4. 复制或下载并做语法检查

   右侧结果随输入和选项变化。复制到项目后，应在目标运行环境执行格式化、静态检查和测试；下载按钮保存的是 JavaScript 文本文件。

多行输入的可复现结果

以下输入使用默认的“字符串变量 + 单引号 + 加号拼接”设置：

<div class="card">
  <strong>Hello</strong>
</div>

输出按行连接：

var html = '<div class="card">' +
'  <strong>Hello</strong>' +
'</div>';

若改为 document.writeln，三行会分别生成三次调用；若只切换为双引号，外层改用双引号，属性中的双引号会被转义。工具不会把输入行首空格删掉，因此缩进也会成为字符串内容的一部分。

输出使用中的常见疑问

执行生成代码前的安全边界

字符转义只解决 JavaScript 源码能否正确表示文本，不等于 HTML 清洗、内容可信或执行安全。

• document.writeln 会把参数解析为 HTML，MDN 已将其标记为弃用，并提示它可能成为注入入口；新代码应优先采用项目认可的 DOM 或模板方案。
• 不要把用户可控 HTML 未经可信清洗就写入页面。事件属性、危险链接和其他可执行标记不会因加上字符串引号而失效。
• 转换器不校验标签闭合、字符实体、脚本语义或目标浏览器兼容性。复制后仍需运行代码检查与页面测试。
• 单引号、双引号和行继续开关只影响输出源码的表示形式，不会自动改变 HTML 的视觉效果或业务逻辑。