Quelqu'un a-t-il un algorithme de diff pour le rendu HTML? [fermé]

Je suis intéressé à voir un bon algorithme de diff, éventuellement en Javascript, pour rendre un diff côte à côte de deux pages HTML. L'idée serait que le diff montre les différences du HTML rendu .

Pour clarifier, je veux pouvoir voir les différences côte à côte en tant que sortie rendue. Donc, si je supprime un paragraphe, la vue côte à côte saurait espacer correctement les choses.

@Josh exactement. Bien que cela montre peut-être le texte supprimé en rouge ou quelque chose du genre. 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 diffs côte à côte de manière conviviale.

Il existe une autre astuce intéressante que vous pouvez utiliser pour améliorer considérablement l'apparence d'un diff HTML rendu. Bien que cela ne résout pas complètement le problème initial, cela fera une différence significative dans l'apparence de vos différences HTML rendues.

Le HTML rendu côte à côte rendra très difficile l'alignement vertical de votre diff. L'alignement vertical est crucial pour comparer les différences 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 doit être aligné verticalement. Ensuite, vous pouvez utiliser un peu de JavaScript côté client pour ajouter un espacement vertical autour du point de contrôle jusqu'à ce que les côtés s'alignent verticalement.

Expliqué un peu plus en détail:

Si vous souhaitez utiliser cette technique, exécutez votre algorithme de diff et insérez un groupe de visibility:hidden <span>s ou de minuscules <div>s partout où vos versions côte à côte doivent correspondre, selon le diff. Ensuite, exécutez 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 profond) sur la page. Maintenant, 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.

Au cours du week-end, j'ai posté un nouveau projet sur codeplex qui implémente un algorithme HTML diff en C #. L'algorithme d'origine a été écrit en Ruby. Je crois comprendre que vous cherchiez une implémentation JavaScript, peut-être 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 ici .

MISE À JOUR: Cette bibliothèque a été déplacée vers GitHub .

J'ai fini par avoir besoin de quelque chose de similaire il y a quelque temps. Pour que le HTML s'aligne côte à côte, vous pouvez utiliser deux iFrames, mais vous devrez ensuite lier leur défilement via javascript lorsque vous faites défiler (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 content de voir un seul rendu HTML du contenu avec un balisage de type «suivi des modifications» MS Word.

HTH

Pensez à utiliser la sortie de liens ou de lynx pour restituer une version texte uniquement du html, puis différez-la.

Qu'en est-il de DaisyDiff ( versions Java et PHP disponibles).

Les fonctionnalités suivantes sont vraiment intéressantes:

• Fonctionne avec du HTML mal formé qui peut être trouvé "dans la nature".
• Le diffing est plus spécialisé en HTML que l'arborescence XML diffère. Changer une partie d'un nœud de texte n'entraînera pas la modification du nœud entier.
• En plus de la différence visuelle par défaut, la source HTML peut être différente de manière cohérente.
• Fournit des descriptions faciles à comprendre des modifications.
• L'interface graphique par défaut permet de parcourir facilement les modifications via des raccourcis clavier et des liens.

Alors tu t'attends

<font face="Arial">Hi Mom</font>

et

<span style="font-family:Arial;">Hi Mom</span>

être considéré comme le même?

La sortie dépend beaucoup de l'agent utilisateur. Comme le suggère Ionut Anghelcovici , créez une image. Faites-en un pour chaque navigateur qui vous intéresse.

Utilisez le mode de balisage de Pretty Diff pour HTML. Il est entièrement écrit en JavaScript.

http://prettydiff.com/

S'il s'agit de XHTML (ce qui suppose beaucoup de ma part), le Xml Diff Patch Toolkit m'aiderait-il? http://msdn.microsoft.com/en-us/library/aa302294.aspx

Pour les différences plus petites, vous pourrez peut-être faire une différence de texte normale, puis analyser les éléments manquants ou insérés pour voir comment le résoudre, mais pour toute différence plus importante, vous aurez du mal à le faire.

Par exemple, comment pourriez-vous détecter et montrer qu'une image alignée à gauche (flottant à gauche d'un paragraphe de texte) s'est soudainement alignée à droite?

L'utilisation d'un texte différent cassera sur les documents non triviaux. En fonction de ce que vous pensez être intuitif, XML diffère générera probablement des différences qui ne sont pas très bonnes pour le texte avec balisage. AFAIK, DaisyDiff est la seule librairie spécialisée en HTML. Cela fonctionne très bien pour un sous-ensemble de HTML.

Si vous travailliez avec Java et XHTML, XMLUnit vous permet de comparer deux documents XML via la classe org.custommonkey.xmlunit.DetailedDiff :

Compare et décrit toutes les différences entre deux documents XML. La comparaison de documents ne s'arrête pas une fois que la première différence irrécupérable est trouvée, contrairement à la classe Diff.

Je pense qu'un bon moyen de le faire est de rendre le HTML en une image , puis d'utiliser un outil de comparaison qui peut comparer les images pour repérer les différences.