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

Generating a diff of two DOM elements (rather than two strings) in javascript

本文关键字：两个 字符串 元素 javascript DOM      更新时间：2023-09-26

这非常适用于字符串：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>

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

$(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/

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

相关文章：