HTML字符串标准化比较：忽略属性顺序与样式声明顺序的精准对比-html教程-PHP中文网

HTML字符串标准化比较：忽略属性顺序与样式声明顺序的精准对比

本文介绍如何使用c#（借助htmlagilitypack）对含html标签的字符串进行语义级相等判断——自动标准化标签属性顺序、样式规则顺序及空白字符，使结构功能一致但格式不同的html字符串判定为相等。

本文介绍如何使用c#（借助htmlagilitypack）对含html标签的字符串进行语义级相等判断——自动标准化标签属性顺序、样式规则顺序及空白字符，使结构功能一致但格式不同的html字符串判定为相等。

在Web内容处理、富文本比对、自动化测试或CMS变更检测等场景中，常需判断两个HTML字符串是否“视觉与语义等效”。例如 <strong style="font-size: 36px; color: rgb(153, 51, 255);"></strong> 与 <strong style="color: rgb(153, 51, 255); font-size: 36px;"></strong> 在渲染结果上完全一致，但原始字符串因属性顺序不同而无法通过 == 或 String.Equals() 判定为相等。此时，需构建规范化（Canonical）HTML表示——即剥离格式差异，保留语义结构。

核心思路分三步：
✅ 属性名排序：统一按字母序排列所有HTML属性（如 class → id → style）；
✅ 样式值归一化：将 style 属性中分号分隔的CSS声明按属性名（如 color、font-size）字典序重排，并标准化空格；
✅ 文本节点净化：去除首尾空白，合并连续空白为单个空格，避免无关空白干扰比对。

以下为完整可运行示例（需先通过NuGet安装 HtmlAgilityPack）：

using System;
using System.Linq;
using System.Text;
using System.Text.RegularExpressions;
using HtmlAgilityPack;

class HtmlCanonicalComparer
{
    public static bool AreSemanticallyEqual(string html1, string html2)
    {
        if (string.IsNullOrWhiteSpace(html1) && string.IsNullOrWhiteSpace(html2))
            return true;
        if (string.IsNullOrWhiteSpace(html1) || string.IsNullOrWhiteSpace(html2))
            return false;

        var doc1 = new HtmlDocument(); doc1.LoadHtml(html1);
        var doc2 = new HtmlDocument(); doc2.LoadHtml(html2);

        return GetCanonicalHtml(doc1.DocumentNode) == GetCanonicalHtml(doc2.DocumentNode);
    }

    private static string GetCanonicalHtml(HtmlNode node)
    {
        // 文本节点：标准化空白
        if (node.NodeType == HtmlNodeType.Text)
            return NormalizeWhitespace(node.InnerText);

        var sb = new StringBuilder();
        sb.Append(' a.Name))
        {
            string value = attr.Value;
            if (attr.Name.Equals("style", StringComparison.OrdinalIgnoreCase))
                value = NormalizeStyleAttribute(value);
            sb.Append(' ')
              .Append(attr.Name)
              .Append("=\"")
              .Append(NormalizeWhitespace(value))
              .Append('"');
        }
        sb.Append('>');

        // 递归处理子节点
        foreach (HtmlNode child in node.ChildNodes)
            sb.Append(GetCanonicalHtml(child));

        sb.Append("").Append(node.Name).Append('>');
        return sb.ToString();
    }

    private static string NormalizeWhitespace(string input) =>
        string.IsNullOrEmpty(input) ? string.Empty : Regex.Replace(input.Trim(), @"\s+", " ");

    private static string NormalizeStyleAttribute(string style)
    {
        if (string.IsNullOrWhiteSpace(style)) return string.Empty;

        return string.Join("; ", 
            style.Split(';', StringSplitOptions.RemoveEmptyEntries)
                 .Select(s => s.Trim())
                 .Where(s => !string.IsNullOrEmpty(s))
                 .Select(s =>
                 {
                     var parts = s.Split(new[] { ':' }, 2, StringSplitOptions.None);
                     string name = parts[0].Trim();
                     string value = parts.Length > 1 ? NormalizeWhitespace(parts[1].Trim()) : string.Empty;
                     return new { Name = name, Value = value };
                 })
                 .OrderBy(x => x.Name)
                 .Select(x => $"{x.Name}: {x.Value}")
        ) + ";";
    }
}

// 使用示例
class Program
{
    static void Main()
    {
        string str1 = "<p><strong style='\"font-size:' color: rgb>Hello </strong><em><u>World</u></em></p>";
        string str2 = "<p><strong style='\"color:' rgb font-size:>Hello </strong><em><u>World</u></em></p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img
														src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a>
													<p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>";

        bool result = HtmlCanonicalComparer.AreSemanticallyEqual(str1, str2);
        Console.WriteLine($"Semantic equality: {result}"); // 输出：True
    }
}

⚠️ 注意事项：

该方法不解析CSS优先级或继承逻辑，仅做静态结构归一化（适用于大多数富文本编辑器输出比对）；
对自闭合标签（如 <img>）和大小写敏感性（HTML标准不区分标签名大小写，但此处严格按源码大小写处理）未作额外适配，如需更健壮支持，建议扩展 GetCanonicalHtml 中对 HtmlNodeType.Element 的处理逻辑；
大量HTML批量比对时，可缓存 GetCanonicalHtml 结果以提升性能；
若需忽略注释、<script></script>/<style></style> 内容或处理HTML实体（如），应在归一化前预处理节点树。