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库，并假定表具有相同的维度。

$(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);
    });
});

http://jsfiddle.net/SPSJb/

Answer 2

我最近实现了https://github.com/teamwork/visual-dom-diff，它比较了两个DOM节点，并生成了DocumentFragment，其中所有差异都适当地包装在<ins>和<del>元素中。它认为这可能适合您的用例。

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

2 个答案: