Question

我想比较两个HTML文档，并想知道它们是否相同。但只能通过DOM结构进行比较，这意味着忽略标记中属性的顺序，例如，<table id="one" name="table">，<table name="table" id="one">是相同的。

Answer 1

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

请注意，这不会测试DOM Level 3 Core所需的额外DocumentType属性。你可以相当容易地添加它，但是对entities这样的东西的浏览器支持无论如何都非常弱。

Answer 2

我有这个问题，并且能够通过使用jQuery的.html()函数将我的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 3

如果您需要比较静态内容，可以尝试diffxml或xmldiff（后者也支持html文件。

Answer 4

我已经解决了这个问题，daisydiff是一个解决方案

Answer 5

我已经使用WinMerge很长一段时间了，我从来没有遇到任何问题。

我将它用于php / html / css等 - 但是我的同事也将它用于delphi，c＃等等。

有没有可以通过DOM结构比较HTML文档的工具？

5 个答案: