Comparar Dois Textos Online: Diff Lado a Lado

O Que Este Exemplo Mostra

As duas funções acima computam o mêsmo resultado usando abordagens diferentes. A original usa um loop for imperativo com uma variável let mutável. A versão modificada usa Array.reduce com um const. O diff destaca exatamente o que mudou durante esta refatoração.

Como Algoritmos de Diff Funcionam

Algoritmo Myers

O algoritmo Myers é a fundação da maioria das ferramentas diff. Modela a comparação como um problema de menor script de edição: dadas duas sequências de linhas, encontre o número mínimo de inserções e exclusões para transformar a primeira na segunda.

Patience diff

Patience diff primeiro identifica linhas que aparecem exatamente uma vez em cada arquivo (linhas únicas), usa estas como âncoras, e depois aplica recursão nas regiões entre âncoras.

Destaque a nível de caractere

Após encontrar quais linhas mudaram, uma ferramenta diff pode aplicar o mêsmo algoritmo a nível de caractere dentro de cada linha alterada.

Entendendo o Formato Unified Diff

@@ -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;
 }

Vista Lado a Lado vs Inline

Lado a lado coloca o original à esquerda é o modificado à direita. É melhor para código e texto estruturado.

Vista inline intercala linhas removidas e adicionadas em uma única coluna. É mais compacta.

Quando Usar Diff Online vs Git Diff

Git diff funciona apenas em arquivos em um repositório git. Para conteúdo fora de um repo, ou para comparar coisas que não existem como arquivos, uma ferramenta diff online é a escolha prática.