本教程详细介绍了如何在php中安全有效地清理html元素的`style`属性，仅保留`font-family`样式。通过结合使用`domdocument`解析html结构和精确的正则表达式，我们可以遍历所有元素，提取并替换其`style`属性值，从而实现对html样式的精细控制和标准化，避免直接对html字符串进行正则操作的风险。
在网页内容处理和HTML净化场景中，经常需要对HTML元素的内联样式（style属性）进行精细控制。例如，我们可能希望移除所有自定义样式，只保留字体族（font-family）信息，以确保内容在不同环境下的视觉一致性，或符合特定的设计规范。直接使用正则表达式处理复杂的HTML字符串是危险且不可靠的，因为它无法正确处理嵌套结构和各种HTML语法变体。因此，推荐使用PHP内置的DOMDocument类来解析和操作HTML，结合正则表达式来处理style属性的字符串内容。
为什么不直接使用正则表达式处理HTML？
直接对整个HTML字符串使用正则表达式来修改或删除属性是极度不推荐的做法。HTML是一种复杂的结构化语言，正则表达式在处理其嵌套、属性值中的特殊字符、注释以及不同标签的上下文时，极易出错并导致不可预期的结果，甚至破坏HTML结构。正确的做法是先将HTML解析成DOM树，然后通过DOM API进行操作。
使用DOMDocument解析和操作HTML
DOMDocument是PHP处理XML和HTML的强大工具。它能够将HTML字符串解析成一个可遍历和操作的对象模型。通过遍历DOM树中的每一个元素，我们可以检查并修改其style属性。
1. 加载HTML到DOMDocument
首先，我们需要将待处理的HTML内容加载到DOMDocument对象中。为了避免DOMDocument自动添加<html>、<head>、<body>等标签，以及默认的DTD声明，我们可以使用LIBXML_HTML_NOIMPLIED和LIBXML_HTML_NODEFDTD这两个libxml选项。
立即学习“PHP免费学习笔记（深入）”；
$data = <<<DATA <div style='margin: 0px 14.3906px 0px 28.7969px; padding: 0px; width: 436.797px; float: left; font-family: "Open Sans", Arial, sans-serif;'><p style="margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 0px; text-align: justify;"><strong style="margin: 0px; padding: 0px;">Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><div><br></div></div><div style='margin: 0px 28.7969px 0px 14.3906px; padding: 0px; width: 436.797px; float: right; font-family: "Open Sans", Arial, sans-serif;'></div> DATA; $dom = new DOMDocument(); // 使用LIBXML_HTML_NOIMPLIED和LIBXML_HTML_NODEFDTD避免自动添加HTML/BODY标签和默认DTD $dom->loadHTML($data, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
2. 遍历元素并处理style属性
加载HTML后，我们可以使用getElementsByTagName('*')获取文档中的所有元素。对于每个元素，我们检查它是否包含style属性。如果存在，则提取其值，并使用正则表达式进行处理。
3. 精确的正则表达式提取font-family
关键在于如何从style属性的字符串中精确地提取font-family属性及其值，同时丢弃其他所有样式。这里使用的正则表达式是：
.*?\b(font-[^;]+;?).*|.*
让我们详细解析这个正则表达式：
- .*?：非贪婪匹配任意字符（0次或多次）。这确保我们从字符串的开头开始匹配。
- \b(：\b是一个单词边界，确保我们匹配的是一个完整的属性名（例如，font-family而不是my-font-family的一部分）。(开始一个捕获组。
- font-[^;]+;?：这是捕获组的核心。
- font-：匹配字面字符串font-。
- [^;]+：匹配一个或多个非分号字符。这会捕获font-family: "Open Sans", Arial, sans-serif中的值部分。
- ;?：匹配一个可选的分号。因为style属性的最后一个样式可能没有分号。
- )：结束捕获组1。
- .*：匹配捕获组1之后的任意剩余字符。
- |：这是一个“或”操作符。
- .*：如果前面的模式（包含font-family的模式）不匹配，则匹配整个字符串。
当使用preg_replace时，我们将替换字符串设置为$1。这意味着：
- 如果找到了font-family，则整个匹配的字符串会被捕获组1（即font-family及其值）替换。
- 如果未找到font-family，则会匹配整个style字符串（通过|.*），然后被替换为捕获组1（此时为空），从而有效地清空style属性。
4. 替换和更新style属性
在循环中，我们对每个元素的style属性值应用preg_replace。如果替换后的style值非空，则更新元素的style属性；否则，如果style属性值为空（即没有font-family或font-family被移除），则直接移除该属性。
foreach($dom->getElementsByTagName('*') as $element ){
if ($element->hasAttribute('style')) {
$style = $element->getAttribute('style');
// 使用正则表达式提取font-family
$replacement = preg_replace("/.*?\b(font-[^;]+;?).*|.*/", "$1", $style);
// 如果替换后的样式字符串不为空，则更新属性
if (trim($replacement) !== "") {
$element->setAttribute('style', $replacement);
} else {
// 如果替换后的样式为空，则移除整个style属性
$element->removeAttribute('style');
}
}
}5. 输出修改后的HTML
处理完所有元素后，使用saveHTML()方法将修改后的DOM树重新输出为HTML字符串。
echo $dom->saveHTML();
完整示例代码
将上述步骤整合，形成完整的PHP脚本：
<?php
$data = <<<DATA
<div style='margin: 0px 14.3906px 0px 28.7969px; padding: 0px; width: 436.797px; float: left; font-family: "Open Sans", Arial, sans-serif;'><p style="margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 0px; text-align: justify;"><strong style="margin: 0px; padding: 0px;">Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><div><br></div></div><div style='margin: 0px 28.7969px 0px 14.3906px; padding: 0px; width: 436.797px; float: right; font-family: "Open Sans", Arial, sans-serif;'></div>
DATA;
$dom = new DOMDocument();
// 加载HTML，并使用选项避免自动添加额外的HTML结构
$dom->loadHTML($data, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
// 遍历所有元素
foreach($dom->getElementsByTagName('*') as $element ){
// 检查元素是否包含style属性
if ($element->hasAttribute('style')) {
$style = $element->getAttribute('style');
// 使用正则表达式提取font-family属性及其值
// 模式解释：
// .*? - 非贪婪匹配任意字符直到找到下一个模式
// \b( - 单词边界，开始捕获组1
// font-[^;]+;? - 匹配 "font-" 后跟一个或多个非分号字符，可选的分号
// ) - 结束捕获组1
// .* - 匹配捕获组1之后的任意剩余字符
// | - 或
// .* - 如果前面模式不匹配（即没有font-family），则匹配整个字符串
$replacement = preg_replace("/.*?\b(font-[^;]+;?).*|.*/", "$1", $style);
// 如果替换后的样式字符串不为空（即成功提取到font-family），则更新属性
if (trim($replacement) !== "") {
$element->setAttribute('style', $replacement);
} else {
// 如果替换后的样式为空（没有font-family或被移除），则移除整个style属性
$element->removeAttribute('style');
}
}
}
// 输出修改后的HTML
echo $dom->saveHTML();
?>预期输出：
<div style='font-family: "Open Sans", Arial, sans-serif;'><p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><div><br></div></div><div style='font-family: "Open Sans", Arial, sans-serif;'></div>
注意事项和总结
- HTML解析的健壮性：DOMDocument在处理不规范的HTML时可能会有一些限制。对于极端不规范的HTML，可能需要结合其他HTML净化库（如HTML Purifier）以确保最佳效果。
- 正则表达式的局限性：虽然这里将正则表达式应用于单个属性字符串是相对安全的，但仍需确保其精确性。如果font-family的格式有多种变体（例如，包含!important），则正则表达式可能需要进一步调整。
- 性能考量：对于非常大的HTML文档，遍历所有元素并进行字符串替换可能会有性能开销。在实际应用中，如果性能是关键因素，可能需要进行基准测试和优化。
- 安全性：此方法主要用于样式清理。如果涉及到用户输入并需要防止XSS攻击，仅清理style属性是不够的，还需要进行全面的HTML净化。
通过结合DOMDocument的结构化解析能力和正则表达式的模式匹配优势，我们可以高效且安全地实现对HTML内联样式的精细控制，仅保留font-family属性，从而满足特定的内容处理需求。这种方法比直接对HTML字符串进行正则替换更加健壮和可靠。
