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

Question

This works really well for strings: http://ejohn.org/projects/javascript-diff-algorithm/

And I used to do string diffing server side (in ruby), but It's really hard to also take into consideration forced tag structure, like in tables.

What I did with just non table html was too add spans around the added and deleted text / inline elements. That method works well until you start trying to diff groups of TDs.

So, is there any Javascript library out there that will generate a visual diff with tables?

UPDATE / Example:

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>

Resulting Table (just a possibility, as there are many ways to show diffs)

<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

Here is my initial attempt. It uses the diff library that you referenced and assumes that the tables are of the same dimensions.

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

I recently implemented https://github.com/teamwork/visual-dom-diff which compares 2 DOM nodes and generates a DocumentFragment with all differences wrapped in <ins> and <del> elements as appropriate. It think it could be appropriate for your use case.