У меня есть этот код JavaScript от пользователя Harmen.

Удивительно, как такой короткий код делает работу бога. http://jsfiddle.net/pfYtu/

Я попытался отредактировать его, чтобы сделать построчное сравнение, но в коде нет комментариев, и мне становится трудно понять логику (того, как это работает). Пусть оригинальный кодер может дать мне несколько советов.

Что я подразумеваю построчно? В настоящее время он отображает результат в виде одного столбца таблицы, ну, я хочу, чтобы он был в двух столбцах. Вот оригинальный исходный код.

// http://harmen.no-ip.org/javascripts/diff/
// http://stackoverflow.com/questions/4462609
function diff_text(text1, text2) {
  var table = '';

  function make_row(x, y, type, text) {
    if (type == ' ') console.log(x, y);
    var row = '<tr';
    if (type == '+') row += ' class="add"';
    else if (type == '-') row += ' class="del"';
    row += '>';

    row += '<td class="lineno">' + y;
    row += '<td class="lineno">' + x;
    row += '<td class="difftext">' + type + ' ' + text;

    table += row;
  }

  function get_diff(matrix, a1, a2, x, y) {
    if (x > 0 && y > 0 && a1[y-1] === a2[x-1]) {
      get_diff(matrix, a1, a2, x-1, y-1);
      make_row(x, y, ' ', a1[y-1]);
    }
    else {
      if (x > 0 && (y === 0 || matrix[y][x-1] >= matrix[y-1][x])) {
        get_diff(matrix, a1, a2, x-1, y);
        make_row(x, '', '+', a2[x-1]);
      }
      else if (y > 0 && (x === 0 || matrix[y][x-1] < matrix[y-1][x])) {
        get_diff(matrix, a1, a2, x, y-1);
        make_row('', y, '-', a1[y-1]);
      }
      else {
        return;
      }
    }
  }

  function diff(a1, a2) {
    var matrix = new Array(a1.length + 1);
    var x, y;

    for (y = 0; y < matrix.length; y++) {
      matrix[y] = new Array(a2.length + 1);

      for (x = 0; x < matrix[y].length; x++) {
        matrix[y][x] = 0;
      }
    }

    for (y = 1; y < matrix.length; y++) {
      for (x = 1; x < matrix[y].length; x++) {
        if (a1[y-1] === a2[x-1]) {
          matrix[y][x] = 1 + matrix[y-1][x-1];
        }
        else {
          matrix[y][x] = Math.max(matrix[y-1][x], matrix[y][x-1]);
        }
      }
    }

    get_diff(matrix, a1, a2, x-1, y-1);
  }

  diff(text1.split('\n'), text2.split('\n'));
  return '<table class="diff_text">' + table + '</table>';
}
1
Danielo515 27 Янв 2013 в 09:28

2 ответа

Лучший ответ

Попробуйте эту функцию make_row .. она дает результаты в 2 столбцах.

function make_row(x, y, type, text) {
        if (type == ' ') console.log(x, y);
        var row = '<tr';
        if (type == '+') row += ' class="add"';
        else if (type == '-') row += ' class="del"';
    row += '>';

    row += '<td class="lineno">' + y;
    row += '<td class="lineno">' + x;
      if (type == ' '){
            row += '<td class="difftext">' + type + ' ' + text;
            row += '<td class="difftext">' + type + ' ' + text;
          }

      if (type == '+'){
            row += '<td class="difftext">' +  ' ';
            row += '<td class="difftext">' + type + ' ' + text;
          }

      if (type == '-'){
            row += '<td class="difftext">' + type + ' ' +text;
            row += '<td class="difftext">' +  ' ' ;
          }

   table += row;
  }
0
user1974729 27 Янв 2013 в 06:33

Я настоятельно рекомендую библиотеку Google diff_match_patch - она очень эффективна и прекрасно работает , Он может создавать различия с машины, а также с точки зрения человека.

Недавно использовал его в проекте. API немного затруднителен, поэтому я написал библиотеку jQuery, чтобы обернуть вызовы: https: / /github.com/arnab/jQuery.PrettyTextDiff/.

Вот демоверсия на jsfiddle. В основном все, что вам нужно сделать, это:

$(<selector>).prettyTextDiff({
    // options
});

Если вы используете его и у вас есть вопросы, пожалуйста, задавайте здесь (или в вопросах GH).

1
arnab 30 Янв 2013 в 09:53