如何将PHP heredoc中的HTML转换为合法JSON字符串？

核心问题分析 #

出错的根源通常是HTML中的双引号、换行/空白字符未被正确转义，或者json_encode参数配置不当，导致生成的JSON不符合语法规范，JS解析时报错。

方案一：直接处理Heredoc生成JSON #

适合不需要修正HTML语法的场景，步骤如下：

1. 定义你的Heredoc登录表单：

$loginForm = <<<HTML
<div class="login-form">
    <form method="post" action="/login">
        <input type="email" name="email" placeholder="邮箱" required>
        <input type="password" name="password" placeholder="密码" required>
        <button type="submit">登录</button>
    </form>
</div>
HTML;

2. 清理HTML中的多余空白（可选，但能避免换行导致的JSON语法问题）：

// 替换多个空白/换行为单个空格，同时去除首尾空白
$cleanHtml = preg_replace('/\s+/', ' ', trim($loginForm));

3. 用json_encode生成合法JSON，关键参数组合：

// JSON_HEX_QUOT：将双引号转义为\u0022，避免与JSON的外层双引号冲突
// JSON_UNESCAPED_UNICODE：保留中文等Unicode字符，不转义为\uXXXX
$jsonResult = json_encode(
    ['content' => $cleanHtml],
    JSON_HEX_QUOT | JSON_UNESCAPED_UNICODE
);

// 输出结果
echo $jsonResult;

方案二：用DOMDocument修正HTML后生成JSON #

如果你的Heredoc HTML存在未闭合标签等语法问题，可先用DOMDocument处理：

$loginForm = <<<HTML
<div class="login-form">
    <form method="post" action="/login">
        <input type="email" name="email" placeholder="邮箱" required>
        <input type="password" name="password" placeholder="密码" required>
        <button type="submit">登录</button>
    </form>
</div>
HTML;

// 初始化DOMDocument，@符号忽略解析警告
$dom = new DOMDocument();
@$dom->loadHTML($loginForm);

// 提取body内的内容（避免DOM自动添加的DOCTYPE、html标签）
$bodyNode = $dom->getElementsByTagName('body')->item(0);
$processedHtml = $bodyNode->innerHTML;

// 生成JSON
$jsonResult = json_encode(
    ['content' => $processedHtml],
    JSON_HEX_QUOT | JSON_UNESCAPED_UNICODE
);

echo $jsonResult;

验证正确性 #

生成的JSON格式示例（简化版）：

{"content":"<div class=\u0022login-form\u0022> <form method=\u0022post\u0022 action=\u0022/login\u0022> <input type=\u0022email\u0022 name=\u0022email\u0022 placeholder=\u0022邮箱\u0022 required> <input type=\u0022password\u0022 name=\u0022password\u0022 placeholder=\u0022密码\u0022 required> <button type=\u0022submit\u0022>登录</button> </form> </div>"}

将此JSON复制到JS中用JSON.parse()解析，不会出现语法错误。

内容的提问来源于stack exchange，提问作者mhdi