Существуют ли инструменты, которые могут сравнивать HTML-документы по структуре DOM?

Question

Я хочу сравнить два HTML-документа и узнать, совпадают ли они.Но сравнивайте только по структуре DOM, что означает игнорирование порядка атрибутов в теге, например, <table id="one" name="table">, <table name="table" id="one"> совпадают.

Answer 1

У меня была эта проблема, и я смог решить ее с помощью функции .html() jQuery, чтобы поместить мой HTML-код в div, а затем вернуть его обратно, получив таким образом каноническое представление кода.Похоже, что в Firefox 4 и IE8 отлично работает.

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 2

DOM Level 3 Core предоставляет метод isEqualNode () , который сравнивает содержимое для получения проанализированного узла DOM.

Это поддерживается Firefox, Chrome, Safari и IE9, но не Operaранние браузеры.Если вам нужна поддержка в других браузерах, вам придется реализовать ее самостоятельно.Вот частичная реализация в 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;
}

Обратите внимание, что тестирование дополнительных свойств DocumentType не требуется, как того требует DOM Level 3 Core.Вы можете добавить это довольно легко, но тогда поддержка браузером таких вещей, как entities, все равно будет довольно слабой.

Answer 3

если вам нужно сравнить статический контент, вы можете попробовать diffxml или xmldiff (последний также поддерживает html-файлы.

Answer 4

Я использовал WinMerge в течение долгого времени, и у меня никогда не было проблем с ним.

Я использую его для php / html / css и т. Д., Но мои коллеги также используют его для delphi, c # и других.

Answer 5

Я решил проблему, daisydiff - это решение