Gibt es Tools, die HTML-Dokumente anhand der DOM-Struktur vergleichen können?

Question

Ich möchte zwei HTML-Dokumente vergleichen und wissen, ob sie gleich sind. Aber vergleichen Sie nur nach der DOM-Struktur, d.h. ignorieren Sie z.B. die Reihenfolge der Attribute in einem Tag, <table id="one" name="table"> , <table name="table" id="one"> sind identisch.

Answer 1

DOM Level 3 Core bietet die Methode isEqualNode() die den Inhalt vergleicht, gibt einen geparsten DOM-Knoten an.

Dies wird von Firefox, Chrome, Safari und IE9 unterstützt, aber nicht von Opera oder früheren Browsern. Wenn Sie die Unterstützung in anderen Browsern benötigen, müssen Sie sie selbst implementieren. Hier ist eine teilweise Implementierung in 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;
}

Beachten Sie, dass dies keine Tests für die zusätzlichen DocumentType Eigenschaften, wie sie DOM Level 3 Core erfordert. Sie könnten dies recht einfach hinzufügen, aber dann würde der Browser Unterstützung für Dinge wie entities ist ohnehin ziemlich schwach.

Answer 2

Ich hatte dieses Problem und konnte es lösen, indem ich die jQuery-Funktion .html() Funktion, um meinen HTML-Code in eine div und dann wieder herausnehmen, um eine kanonische Darstellung des Codes zu erhalten. Scheint zumindest in Firefox 4 und IE8 gut zu funktionieren.

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

Answer 3

Wenn Sie statische Inhalte vergleichen müssen, können Sie diffxml o xmldiff ausprobieren (letzteres bietet auch Unterstützung für HTML-Dateien.

Answer 4

Ich habe das Problem gelöst, daisydiff ist eine Lösung

Answer 5

Ich habe die WinMerge für eine verdammt lange Zeit und ich habe nie irgendwelche Probleme mit ihm gehabt.

Ich verwende es für php/html/css usw. - aber Kollegen von mir verwenden es auch für delphi, c# und mehr.