PHP中向DOMNode追加UTF-8字符串时CSS特殊字符转义问题

问题根源 #

1. UTF-8 BOM干扰：CSS文件开头可能带有UTF-8 BOM（\xEF\xBB\xBF），DOMDocument会将其转义为。
2. DOMText自动转义：createTextNode会对非ASCII字符进行HTML实体转义，不符合CSS内容的展示需求。

修复代码 #

<?php
$document = new DOMDocument();
// 加载HTML时明确编码规则，避免自动补全多余标签
$document->loadHTMLFile("text.html", LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$document->formatOutput = true;
$xPath = new DOMXpath($document);
$head = $xPath->query("//html/head")[0];

$styleElement = $document->createElement("style");
$styleElement->setAttribute("type", "text/css");

// 读取CSS并移除开头的UTF-8 BOM
$cssContent = file_get_contents("style.css");
$cssContent = preg_replace('/^\xEF\xBB\xBF/', '', $cssContent);

// 用CDATA包裹CSS内容，避免自动转义
$styles = $document->createCDATASection($cssContent);
$styleElement->appendChild($styles);

$head->appendChild($styleElement);
echo $document->saveHTML();
?>

关键说明 #

• 移除UTF-8 BOM：通过正则表达式清除CSS文件开头的BOM，消除多余转义字符。
• 使用CDATA段：createCDATASection会将内容原样包裹在<![CDATA[...]]>中，DOMDocument不会对其中的非ASCII字符转义，完美适配CSS格式。
• HTML加载参数：添加LIBXML_HTML_NOIMPLIED和LIBXML_HTML_NODEFDTD，避免DOMDocument自动补全多余的DOCTYPE或根标签，保持输出结构与原始HTML一致。

验证结果 #

修复后输出的HTML中，CSS内容会保留原始UTF-8字符：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css"><![CDATA[@charset "utf-8";

p::before {
    content: '✧';
}
]]></style>
    </head>
    <body>
        <p>Put a ✧ before this.</p>
    </body>
</html>

浏览器可正确解析CDATA中的CSS，渲染出期望的✧Put a ✧ before this.效果。

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