HTML belgelerini DOM yapısına göre karşılaştırabilen araçlar var mı?

Question

İki HTML belgesini karşılaştırmak ve aynı olup olmadığını öğrenmek istiyorum. Ancak yalnızca DOM yapısıyla karşılaştırmak, yani bir etiketteki özniteliklerin sırasını göz ardı etmek anlamına gelir, örneğin, <table id="one" name="table">, <table name="table" id="one"> aynıdır. Eğer statik içerik karşılaştırmak gerekirse

Answer 1

Eğer diffxml veya xmldiff bir deneyin (html dosyaları için daha sonra da sahiptir destek verebilir.

Answer 2

DOM Düzey 3 Çekirdek içeriği ayrıştırılır DOM Düğüm vermek karşılaştırır yöntem isEqualNode() sağlar. .

Bu

diğer tarayıcılarda desteğe ihtiyaç varsa bunu kendiniz uygulamak zorunda kalacak Firefox, Chrome, Safari ve IE9, ancak Opera veya daha önceki tarayıcılar tarafından desteklenmektedir Burada JS kısmi uygulama görebilirsiniz:.

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; 
} 

Not Bu, DOM Seviye 3 Çekirdeğinin gerektirdiği ekstra DocumentType özellikleri için test yapmaz. Bunu oldukça kolay bir şekilde ekleyebilirsiniz, ancak daha sonra entities gibi şeylerin tarayıcı desteği oldukça zayıftır. Ben sorunu çözmek zorunda

Answer 3

, daisydiff ben hella uzun süre WinMerge kullandığınız bir çözüm

Answer 4

ve ben onunla herhangi bir sorun olmadı.

php/html/css, etc için kullanıyorum - ama benim meslektaşlarım da delphi, C# ve daha fazlası için kullanıyor.

Answer 5

Bu sorunu çözdüm ve html kodumu div içine koyup jQuery'nin .html() işlevini kullanarak çözmeyi başarabiliyordum ve daha sonra bu kodun kuralsız bir şekilde gösterilmesini sağladı. En azından Firefox 4 ve IE8'de gayet iyi çalışıyor gibi görünüyor. arasında

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; 
}