Quelqu'un a-t-il un algorithme de comparaison pour le rendu HTML ?[fermé]
https://stackoverflow.com/questions/31722
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je suis intéressé à voir un bon algorithme de comparaison, éventuellement en Javascript, pour rendre une comparaison côte à côte de deux pages HTML.L'idée serait que le diff montre les différences entre les rendu HTML.
Pour clarifier, je veux pouvoir voir les différences côte à côte comme sortie rendue.Donc, si je supprime un paragraphe, la vue côte à côte saura espacer correctement les choses.
@Josh exactement.Mais peut-être que cela afficherait 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 peut-être le faire avec deux éditeurs WYSIWYG côte à côte.Ou au moins afficher les différences côte à côte de manière conviviale pour l'utilisateur final.
La solution
Il existe une autre astuce intéressante que vous pouvez utiliser pour améliorer considérablement l'apparence d'une différence HTML rendue.Bien que cela ne résolve pas complètement le problème initial, cela fera une différence significative dans l'apparence de vos différences HTML rendues.
Le rendu HTML côte à côte rendra très difficile l'alignement vertical de votre différence.L'alignement vertical est crucial pour comparer les différences côte à côte.Afin d'améliorer l'alignement vertical d'un différentiel côte à côte, vous pouvez insérer des éléments HTML invisibles dans chaque version du différentiel aux "points de contrôle" où le différentiel 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 comparaison et insérez un tas de visibility:hidden <span>s ou minuscule <div>s partout où vos versions côte à côte doivent correspondre, selon la différence.Exécutez ensuite 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 situé plus haut (moins profond) sur la page.Maintenant, votre différence HTML rendue sera alignée verticalement jusqu'à ce point de contrôle, et vous pourrez continuer à réparer l'alignement vertical sur le reste de votre page côte à côte.
Autres conseils
Au cours du week-end, j'ai publié un nouveau projet sur codeplex qui implémente un algorithme de comparaison HTML en C#.L'algorithme original a été écrit en Ruby.Je comprends que vous recherchiez une implémentation JavaScript, peut-être qu'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 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 aligner le HTML côte à côte, vous pouvez utiliser deux iFrames, mais vous devrez alors lier leur défilement via javascript pendant que vous faites défiler (si vous autorisez le défilement).
Cependant, pour voir la différence, vous souhaiterez probablement utiliser la bibliothèque de quelqu'un d'autre.j'ai utilisé DaisyDiff, une bibliothèque Java, pour un projet similaire dans lequel mon client était satisfait de voir un seul rendu HTML du contenu avec un balisage de type "suivi des modifications" de MS Word.
HTH
Pensez à utiliser la sortie de liens ou de lynx pour afficher une version texte uniquement du code HTML, puis à la comparer.
Qu'en est-il de DaisyDiff (Java et PHP versions disponibles).
Les fonctionnalités suivantes sont vraiment intéressantes :
- Fonctionne avec du HTML mal formé que l'on peut trouver "dans la nature".
- La différence est plus spécialisée en HTML que l'arborescence XML n'en diffère.La modification d'une partie d'un nœud de texte n'entraînera pas la modification de la totalité du nœud.
- En plus de la différence visuelle par défaut, la source HTML peut être comparée de manière cohérente.
- Fournit des descriptions faciles à comprendre des modifications.
- L'interface graphique par défaut permet une navigation facile dans 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 pareil ?
Le résultat dépend beaucoup de l’agent utilisateur.Comme Ionut Anghelcovici suggère, faites 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.
S'il s'agit de XHTML (ce qui suppose beaucoup de ma part), le Xml Diff Patch Toolkit pourrait-il aider ? http://msdn.microsoft.com/en-us/library/aa302294.aspx
Pour des différences plus petites, vous pourrez peut-être effectuer une comparaison de texte normale, puis analyser les éléments manquants ou insérés pour voir comment le résoudre, mais pour des différences plus importantes, vous aurez beaucoup de mal à le faire.
Par exemple, comment détecteriez-vous et montreriez-vous qu’une image alignée à gauche (flottant à gauche d’un paragraphe de texte) est soudainement alignée à droite ?
L'utilisation d'un texte différent sera interrompue sur des documents non triviaux.Selon ce que vous pensez être intuitif, les différences XML généreront probablement des différences qui ne sont pas très bonnes pour le texte avec balisage.AUTANT QUE JE SACHE, DaisyDiff est la seule bibliothèque spécialisée en HTML.Cela fonctionne très bien pour un sous-ensemble de HTML.
Si vous travailliez avec Java et XHTML, UnitéXML permet de comparer deux documents XML via le org.custommonkey.xmlunit.DetailedDiff classe:
Compare et décrit toutes les différences entre deux documents XML.La comparaison du document ne s'arrête pas une fois que la première différence irréprochable est trouvée, contrairement à la classe DIFF.
Je crois qu'une bonne façon de procéder est de rendre le HTML à une image puis utilisez-en un peu outil de comparaison qui peut comparer des images pour repérer les différences.
