Zwei Texte online vergleichen: Side-by-Side-Diff

Was dieses Beispiel zeigt

Die beiden obigen Funktionen berechnen dasselbe Ergebnis mit unterschiedlichen Ansätzen. Die Originalfunktion verwendet eine imperative for-Schleife mit einer veränderlichen let-Variablen. Die geänderte Version verwendet Array.reduce mit einem const. Der Diff hebt genau hervor, was sich während dieser Refaktorisierung geändert hat.

Wie Diff-Algorithmen funktionieren

Myers-Algorithmus

Der Myers-Algorithmus ist die Grundlage der meisten Diff-Tools. Er modelliert den Vergleich als Problem des kleinsten Editierskripts: Finde bei zwei gegebenen Folgen von Zeilen die minimale Anzahl von Einfügungen und Löschungen, um die erste in die zweite umzuwandeln.

Patience Diff

Patience Diff identifiziert zuerst Zeilen, die in jeder Datei genau einmal vorkommen (eindeutige Zeilen), verwendet diese als Anker und wendet dann Rekursion auf die Bereiche zwischen den Ankern an.

Zeichengenaue Hervorhebung

Nachdem festgestellt wurde, welche Zeilen sich geändert haben, kann ein Diff-Tool denselben Algorithmus auf Zeichenebene innerhalb jeder geänderten Zeile anwenden.

Das Unified-Diff-Format verstehen

@@ -1,7 +1,8 @@
 function calculateTotal(items) {
-  let total = 0;
-  for (let i = 0; i < items.length; i++) {
-    total += items[i].price * items[i].quantity;
-  }
+  const total = items.reduce(
+    (sum, item) => sum + item.price * item.quantity,
+    0
+  );
   return total;
 }

Side-by-Side vs. Inline-Ansicht

Side by Side platziert das Original links und das Geänderte rechts. Es ist besser für Code und strukturierten Text.

Die Inline-Ansicht mischt entfernte und hinzugefügte Zeilen in einer einzigen Spalte. Sie ist kompakter.

Wann Online-Diff vs. Git Diff verwenden

Git diff funktioniert nur bei Dateien in einem Git-Repository. Für Inhalte außerhalb eines Repos oder zum Vergleichen von Dingen, die nicht als Dateien existieren, ist ein Online-Diff-Tool die praktische Wahl.