如何使用jQuery对比两个div的HTML内容？长内容比对失效如何解决

失效原因 #

直接使用html().trim()做相等判断仅在短内容下生效的核心原因是浏览器对长HTML序列化时会产生非语义化的差异：

• 长内容渲染时浏览器自动插入的换行、制表符、多余空白字符
• 元素属性的排列顺序可能被浏览器自动调整
• 特殊字符的转义、自闭合标签写法可能存在差异
• 部分浏览器会自动补全缺失的标签属性，长内容下触发概率更高

修复方案 #

方案1：标准化HTML字符串后比对（适合轻量场景） #

先对获取到的HTML字符串做统一格式化，消除非语义差异后再做比对：

function normalizeHtml(html) {
  return html
    .trim()
    // 所有空白符统一替换为单个空格
    .replace(/\s+/g, ' ')
    // 移除标签间的多余空格
    .replace(/>\s+</g, '><')
    // 统一自闭合标签格式
    .replace(/\s*\/>/g, '/>')
    // 可选：统一转为小写，适配大小写不敏感的比对需求
    .toLowerCase();
}

// 比对逻辑
if (normalizeHtml($('#Div1').html()) === normalizeHtml($('#Div2').html())) { 
    console.log("Divs are identical");
} else {
    console.log("Divs are different");
}

方案2：递归比对DOM节点（最高精度，适合所有场景） #

跳过HTML序列化步骤，直接比对DOM节点的语义属性和子节点结构，完全不受浏览器序列化规则影响：

function isDomEqual(node1, node2) {
  // 节点类型不同直接判定不等
  if (node1.nodeType !== node2.nodeType) return false;
  // 文本节点直接比对修剪后的内容
  if (node1.nodeType === Node.TEXT_NODE) {
    return node1.textContent.trim() === node2.textContent.trim();
  }
  // 元素节点比对标签名
  if (node1.tagName !== node2.tagName) return false;
  // 比对属性数量
  if (node1.attributes.length !== node2.attributes.length) return false;
  // 逐个比对属性值
  for (const attr of node1.attributes) {
    if (node2.getAttribute(attr.name) !== attr.value) return false;
  }
  // 比对子节点数量
  if (node1.childNodes.length !== node2.childNodes.length) return false;
  // 递归比对所有子节点
  for (let i = 0; i < node1.childNodes.length; i++) {
    if (!isDomEqual(node1.childNodes[i], node2.childNodes[i])) return false;
  }
  return true;
}

// 比对逻辑
if (isDomEqual($('#Div1')[0], $('#Div2')[0])) {
  console.log("Divs are identical");
} else {
  console.log("Divs are different");
}

如果不需要比对特定属性（如动态生成的data-*属性、id属性等），可以在属性比对逻辑中添加过滤规则即可。

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