1. 问题背景：DOMDocument 与非标准属性的冲突
在现代 web 开发中，尤其是在使用 vue.js、angular 等前端框架时，html 元素上经常会包含一些非标准属性，例如 @click、@autocomplete:change 等，它们用于事件绑定或数据绑定。php 的 domdocument 扩展是一个强大的 html/xml 解析器，但它在处理这些非标准属性时，可能会因为底层的 xml 解析规则而将其移除。
DOMDocument 默认遵循 XML 规范，而 @ 符号在 XML 中通常用于表示命名空间前缀。当 DOMDocument 遇到 role="tab" @click="activeType=listingType" 这样的结构时，它可能无法识别 @click 为一个有效的属性名，或将其误判为命名空间声明的错误部分，最终导致这些属性在解析和保存过程中被悄然删除。
以下是一个典型的示例，展示了 DOMDocument 移除 @click 属性的行为：
<?php
$content = <<<'EOT'
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head></head>
<body>
<a role="tab" @click="activeType=listingType"></a>
<input type="text" @autocomplete:change="handleAutocomplete">
</body>
</html>
EOT;
// 创建新的 DOMDocument 实例
$doc = new DOMDocument('1.0', 'utf-8');
$doc->recover = true; // 启用恢复模式，尝试解析不规范的 HTML
$doc->strictErrorChecking = false; // 关闭严格错误检查
// 禁用 libxml 内部错误，防止错误信息输出到控制台
libxml_use_internal_errors(true);
// 加载 HTML 内容，并指定不添加隐含的 html/body 标签和 DOCTYPE 声明
$doc->LoadHTML($content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
echo $doc->saveHTML();
?>上述代码的输出将是：
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head></head>
<body>
<a role="tab"></a>
<input type="text">
</body>
</html>可以看到，@click 和 @autocomplete:change 属性都被移除了。
立即学习“PHP免费学习笔记（深入）”；
2. 解决方案：预处理与后处理的字符串替换
为了解决 DOMDocument 移除 @ 属性的问题，我们可以采用一种简单而有效的预处理和后处理策略：在将 HTML 内容加载到 DOMDocument 之前，将所有 @ 字符替换为一个在 HTML 中不常用的特殊字符串；待 DOMDocument 完成解析和保存操作后，再将该特殊字符串替换回 @。这样，DOMDocument 在处理时就不会遇到不合规的 @ 字符，从而保留了属性的完整性。
2.1 实施步骤
- 预处理： 在调用 DOMDocument::LoadHTML() 之前，使用 str_replace() 将原始 HTML 内容中所有 @ 字符替换为一个独特的、不易冲突的字符串（例如 at------）。
- DOMDocument 处理： 正常加载、操作和保存 HTML 内容。
- 后处理： 在获取到 DOMDocument::saveHTML() 的结果后，再次使用 str_replace() 将之前替换的特殊字符串恢复为 @。
2.2 示例代码
<?php
$content = <<<'EOT'
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head></head>
<body>
<a role="tab" @click="activeType=listingType"></a>
<input type="text" @autocomplete:change="handleAutocomplete">
</body>
</html>
EOT;
// 创建新的 DOMDocument 实例
$doc = new DOMDocument('1.0', 'utf-8');
$doc->recover = true;
$doc->strictErrorChecking = false;
libxml_use_internal_errors(true);
// 步骤1: 预处理 - 将 '@' 替换为临时字符串
$content = str_replace('@', 'at------', $content);
// 步骤2: 加载 HTML 内容
$doc->LoadHTML($content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
// 保存处理后的 HTML
$html = $doc->saveHTML();
// 步骤3: 后处理 - 将临时字符串恢复为 '@'
$html = str_replace('at------', '@', $html);
echo $html;
?>执行上述代码，将得到以下预期输出：
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head></head>
<body>
<a role="tab" @click="activeType=listingType"></a>
<input type="text" @autocomplete:change="handleAutocomplete">
</body>
</html>通过这种方法，@click 和 @autocomplete:change 属性被成功保留了下来。
3. 注意事项与最佳实践
- 选择独特的替换字符串： 替换字符串（如 at------）应尽量独特，确保它不会在原始 HTML 内容的其他部分（例如文本内容、其他属性值）中自然出现，以避免误替换。如果内容复杂，可以考虑使用更长的、包含特殊字符的字符串，甚至结合哈希值来生成一个几乎不可能冲突的字符串。
- 性能考量： 对于非常大的 HTML 内容，str_replace() 的两次调用可能会带来轻微的性能开销。但在大多数常见场景下，这种开销是可以接受的。
- 适用场景： 这种方法特别适用于需要保留前端框架特定语法（如 Vue.js 的 v-on 缩写 @）的 HTML 内容。如果你的 HTML 中包含大量其他类型的非标准或格式错误的标记，DOMDocument 的 recover 和 strictErrorChecking 设置可能需要进一步调整，甚至可能需要考虑使用更容错的 HTML 解析库。
- XML 命名空间： 这种方法仅针对属性名中的 @ 符号，不适用于处理真正的 XML 命名空间（例如 xlink:href）。如果你的文档确实是 XML 且包含命名空间，DOMDocument 能够正确处理。
4. 总结
DOMDocument 是 PHP 处理 HTML 和 XML 的强大工具，但在处理一些非标准的 HTML 属性（特别是带有 @ 符号的属性）时，可能会出现意外行为。通过在加载和保存 HTML 内容之间执行简单的字符串替换预处理和后处理，我们可以有效地规避这一问题，确保 DOMDocument 能够完整地保留这些对现代前端框架至关重要的特殊属性。这种方法简单、高效，且易于实现，是处理此类兼容性问题的一个实用策略。
