在javascript中生成两个DOM元素(而不是两个字符串)的diff

Question

这对字符串非常有用:http://ejohn.org/projects/javascript-diff-algorithm/

而且我曾经做过字符串差异服务器端(在ruby中),但是很难同时考虑强制标记结构,就像在表格中一样.

我只使用非表格html做了太多添加跨越添加和删除的文本/内联元素.在您开始尝试区分TD组之前,该方法很有效.

那么,是否有任何Javascript库会产生一个带表的视觉差异？

更新/示例:

Table1:                    Table 2:

<table>                     <table>
    <tr>                        <tr>
        <td>sometext</td>           <td>some <b>text</b></td>
        <td>moretext</td>           <td><b>more text</b></td>
    </tr>                       <tr>
</table>                    </table>

结果表(只是一种可能性,因为有很多方法可以显示差异)

<table>
    <tr>
        <td>some<del>text</del><add> <b>text</b></add></td>
        <td><del>more text</del><add><b>more text</b></add></td>
    </tr>
</table>

Answer 1

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

\n\n

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

\n\n

http://jsfiddle.net/SPSJb/

\n