¿Hay alguna herramienta que pueda comparar documentos HTML por estructura DOM?

Question

Quiero comparar dos documentos HTML y quiero saber si son los mismos. Pero solo comparar por estructura DOM, lo que significa ignorar el orden de los atributos en una etiqueta, por ejemplo, <table id="one" name="table">, <table name="table" id="one"> son lo mismo.

Answer 1

si es necesario comparar el contenido estático se puede dar diffxml o xmldiff una oportunidad (el más tarde también tiene soporte para archivos html.

Answer 2

DOM Nivel 3 Núcleo proporciona el método isEqualNode() que compara el contenido de dar un DOM nodo analizado.

Esto es apoyado por Firefox, Chrome, Safari e IE9, pero no Opera o navegadores anteriores Si necesita ayuda en otros navegadores que tendría que aplicar por sí mismo Aquí está una implementación parcial en JS:..

function Node_isEqualNode(that, other) { 
    // Use native support where available 
    // 
    if ('isEqualNode' in that) 
     return that.isEqualNode(other); 

    // Check general node properties match 
    // 
    var props= ['nodeType', 'nodeName', 'localName', 'namespaceURI', 'prefix', 'nodeValue']; 
    for (var i= props.length; i-->0;) 
     if (that[props[i]]!==other[props[i]]) 
      return false; 

    // Check element attributes match 
    // 
    if (that.nodeType===1) { 
     if (that.attributes.length!==other.attributes.length) 
      return false; 
     for (var i= that.attributes.length; i-->0;) 
      if (!Node_isEqualNode(that.attributes[i], other.getAttribute(that.attributes[i].name))) 
       return false; 
    } 

    // Check children match, recursively 
    // 
    if (that.childNodes.length!==other.childNodes.length) 
     return false; 
    for (var i= that.childNodes.length; i-->0;) 
     if (!Node_isEqualNode(that.childNodes[i], other.childNodes[i])) 
      return false; 
    return true; 
} 

Tenga en cuenta que esto no prueba las propiedades adicionales DocumentType como requiere DOM Level 3 Core. Puede agregar esto bastante fácilmente, pero el soporte del navegador de cosas como entities es bastante débil de todos modos.

Answer 3

tengo resolver el problema, es una solución daisydiff

Answer 4

que he usado para un WinMerge hella mucho tiempo y nunca he tenido ningún problema con él.

Lo uso para php/html/css, etc. - pero mis colegas también lo usan para delphi, C# y más.

Answer 5

Tuve este problema y pude resolverlo mediante la función .html() de jQuery para poner mi código html en div y luego volver a sacarlo, obteniendo así una representación canónica del código. Parece funcionar bien en Firefox 4 e IE8 al menos.

function compareHtml(a, b) { 
    var div = $(document.createElement('div')); 
    div.html(a); 
    var aNormalized = div.html() 
    div.html(b); 
    var bNormalized = div.html() 
    return aNormalized == bNormalized; 
}