在javascript中生成两个DOM元素（而不是两个字符串）的差异

这对字符串非常有效：

我曾经在服务器端（ruby中）进行字符串差异处理，但很难同时考虑强制标记结构，比如在表中

我对非表html所做的就是在添加和删除的文本/内联元素周围添加跨距。在您开始尝试区分TDs组之前，该方法效果良好

那么，是否有任何Javascript库可以生成带有表的可视差异

更新/示例：

表1：表2：
一些文字一些文字
更多文本更多文本

结果表（只是一种可能性，因为有许多方法可以显示差异）

一些文本
更多文本更多文本

这是我最初的尝试。它使用您引用的diff库，并假设表具有相同的维度

$(document).ready(function() {
    $("#tbl1 tbody").children("tr").each(function(rownum, tr) {
        _tr = $("<tr>");
        tr2 = $($("#tbl2 tbody tr").get(rownum));
        $(tr).children("td").each(function(colnum, td) {
            text = $(td).html();
            text2 = $($(tr2).children("td").get(colnum)).html();
            _tr.append("<td>" + diffString(text, text2) + "</td>");
        });
        $("#results").append(_tr);
    });
});​

$（文档）.ready（函数（）{
$（“#tbl1 tbody”）。子项（“tr”）。每个（函数（rownum，tr）{
_tr=$（“”）；
tr2=$（$）.get（rownum））；
$（tr）.children（“td”）。每个函数（colnum，td）{
text=$（td.html（）；
text2=$（$（tr2）.children（“td”）.get（colnum））.html（）；
_tr.append（“+diffString（text，text2）+”）；
});
$（“#结果”）。追加（#tr）；
});
});​

---

我最近实现了一个比较两个DOM节点并生成一个

DocumentFragment

，所有差异都适当地包装在

和

元素中。它认为它可能适合您的用例。

我不确定是否理解您的问题。是否要比较两个DOM元素，并找出它们的属性、内容等是否不同以及如何不同？还是只想比较两个元素的文本内容？嗯，对于表来说，它需要是递归的。属性不重要。。。但是是的，元素的文本是我需要比较的。除非a中有，否则文本比较中将包含。=\idk，我可能只需要找到一种在javascript中区分数组的方法，并使用jquery获取分组为数组的元素，将它们传递给未编写的函数？我真的认为您应该提供一个示例和您期望的输出。如果（$（'.cell1'）.text（）==$（'.cell2'）.text（））{…}如何？或者我完全错过了这里的问题。仅供参考，HTML有

和

标记用于类似目的。我认为您需要遍历DOM，可能需要使用

$.grep

来简化代码。这是一个很好的例子。但我觉得，一个完全有能力的剧本会非常难看=(