Генерация различий из двух элементов DOM (а не двух строк) в JavaScript - PullRequest
Новая
       5

Генерация различий из двух элементов DOM (а не двух строк) в JavaScript

8 голосов
/ 27 февраля 2012

Это очень хорошо работает для строк: 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>

Ответы [ 2 ]

2 голосов
/ 29 февраля 2012

Вот моя первоначальная попытка.Он использует библиотеку 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/

0 голосов
/ 03 декабря 2018

Я недавно реализовал https://github.com/teamwork/visual-dom-diff, который сравнивает 2 узла DOM и генерирует DocumentFragment со всеми различиями, заключенными в элементы <ins> и <del> в зависимости от ситуации.Думаю, это может подойти для вашего варианта использования.

...