Quelqu'un a un algorithme de différence pour le HTML rendu ?

Question

J'aimerais voir un bon algorithme de comparaison, éventuellement en Javascript, pour rendre une comparaison côte à côte de deux pages HTML. L'idée est que le diff montre les différences entre les pages HTML et les pages non HTML. rendu HTML.

Pour clarifier, je veux être en mesure de voir les différences côte à côte comme sortie rendue. Ainsi, si je supprime un paragraphe, la vue côte à côte saura espacer les choses correctement.

---

@Josh exactement. Mais peut-être que le texte supprimé serait affiché en rouge ou autre. L'idée est que si j'utilise un éditeur WYSIWYG pour mon contenu HTML, je ne veux pas avoir à passer au HTML pour faire des différences. Je veux le faire avec deux éditeurs WYSIWYG côte à côte peut-être. Ou au moins afficher les différences côte à côte d'une manière conviviale pour l'utilisateur final.

Answer 1

Il existe une autre astuce intéressante qui permet d'améliorer considérablement l'aspect d'un diff HTML rendu. Bien que cela ne résolve pas complètement le problème initial, cela fera une différence significative dans l'apparence de vos diffs HTML rendus.

Le HTML rendu côte à côte rendra très difficile l'alignement vertical de votre diff. L'alignement vertical est crucial pour comparer des diffs côte à côte. Afin d'améliorer l'alignement vertical d'un diff côte à côte, vous pouvez insérer des éléments HTML invisibles dans chaque version du diff à des "points de contrôle" où le diff devrait être aligné verticalement. Ensuite, vous pouvez utiliser un peu de JavaScript côté client pour ajouter un espacement vertical autour des points de contrôle jusqu'à ce que les côtés soient alignés verticalement.

Expliqué un peu plus en détail :

Si vous voulez utiliser cette technique, exécutez votre algorithme de diff et insérez un tas de visibility:hidden <span> ou minuscules <div> s où vos versions côte à côte devraient correspondre, selon le diff. Ensuite, exécutez le JavaScript qui trouve chaque point de contrôle (et son voisin côte à côte) et ajoute un espacement vertical au point de contrôle qui est plus haut (moins haut) dans la page. Désormais, votre diff HTML rendu sera aligné verticalement jusqu'à ce point de contrôle, et vous pouvez continuer à réparer l'alignement vertical sur le reste de votre page côte à côte.

Answer 2

Au cours du week-end, j'ai posté un nouveau projet sur codeplex qui implémente un algorithme de diff HTML en C#. L'algorithme original était écrit en Ruby. J'ai cru comprendre que vous recherchiez une implémentation JavaScript, peut-être que le fait d'en avoir une disponible en C# avec le code source pourrait vous aider à porter l'algorithme. Voici le lien si vous êtes intéressé : htmldiff.codeplex.com . Vous pouvez en savoir plus à ce sujet aquí .

UPDATE : Cette bibliothèque a été déplacée vers GitHub .

Answer 3

J'ai fini par avoir besoin de quelque chose de similaire il y a quelque temps. Pour que le HTML s'aligne d'un côté à l'autre, vous pourriez utiliser deux iFrames, mais vous devriez alors lier leur défilement ensemble via javascript lors du défilement (si vous autorisez le défilement).

Pour voir la différence, cependant, vous voudrez probablement utiliser la bibliothèque de quelqu'un d'autre. J'ai utilisé DaisyDiff une bibliothèque Java, pour un projet similaire où mon client était satisfait de voir un rendu HTML unique du contenu avec un balisage de type "suivi des modifications" de MS Word.

HTH

Answer 4

Envisagez d'utiliser la sortie de links ou de lynx pour rendre une version texte seulement du html, puis différez-la.

Answer 5

Qu'en est-il DaisyDiff ( Java y PHP vesions disponibles).

Les fonctionnalités suivantes sont vraiment intéressantes :

• Fonctionne avec du HTML mal formé que l'on peut trouver "dans la nature".
• Le diffing est plus spécialisé en HTML qu'en arbre XML. La modification d'une partie d'un nœud de texte n'entraîne pas la modification de l'ensemble du nœud.
• En plus de la différence visuelle par défaut, les sources HTML peuvent être différenciées de manière cohérente.
• Fournit des descriptions faciles à comprendre des changements.
• L'interface graphique par défaut permet de parcourir facilement les modifications grâce aux raccourcis clavier et aux liens.