Quelqu'un a une diff algorithme de rendu HTML?
Je suis intéressé à voir un bon algorithme de comparaison, éventuellement en Javascript, pour le rendu d'un side-by-side diff de deux pages HTML. L'idée serait que la diff serait de montrer les différences de l' rendu HTML.
Pour clarifier, je veux être en mesure de voir le côté-à-côte des diff comme rendu de la sortie. Donc, si je supprime un paragraphe, aux côtés de vue serait de savoir à l'espace, les choses correctement.
@Josh exactement. Mais il serait peut-afficher le texte supprimé en rouge ou quelque chose. L'idée est que si j'utilise un éditeur WYSIWYG pour mon contenu HTML, je ne veux pas passer par le HTML pour faire des diffs. 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 dans un de bout convivial question.
- Est-ce vraiment haacked de microsoft ? l'original ? 😀
- Oui, je suis le même. 🙂
- Sonne de la même façon à cette question: stackoverflow.com/questions/1061468/html-compare
- Ancien fil, mais pensé que je lui donnerais mes 2 cents. J'ai eu affaire avec elle, beaucoup plus récemment, et ont trouvé un tas de libs: web.onassar.com/blog/2012/11/21/htmldiff-software-discoveries
- jamais de trouver une solution satisfaisante?
- Trouvé une solution ? J'ai essayé
prettydiff.com
mais on dirait qu'il est cassé.
Vous devez vous connecter pour publier un commentaire.
Il y a une autre belle astuce que vous pouvez utiliser pour améliorer de manière significative l'apparence d'un rendu HTML diff. Bien que cela n'est pas complètement résolu le problème initial, il va faire une grande différence dans l'apparence de votre rendu HTML de diff.
Side-by-Side rendu HTML fera qu'il sera très difficile pour votre diff pour aligner verticalement. L'alignement Vertical est crucial pour la comparaison côte-à-côté de diff. Afin d'améliorer l'alignement vertical d'un côté à-côté de diff, vous pouvez insérer invisible éléments HTML dans chaque version de la diff à "points de contrôle" où les diff doivent être alignés 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 de la ligne jusqu'à la verticale.
Expliqué un peu plus en détail:
Si vous souhaitez utiliser cette technique, l'exécution de votre algorithme de comparaison et d'insérer un tas de
visibility:hidden
<span>
s ou de minuscules<div>
s partout et en side-by-side versions doivent correspondre, selon les diff. Puis exécuter JavaScript qui trouve à chaque point de contrôle (et de son side-by-side voisin) et ajoute l'espacement vertical vers le point de contrôle qui est plus élevée (la moins profonde) sur la page. Maintenant, votre rendu HTML diff sera aligné verticalement jusqu'à ce point de contrôle, et vous pouvez poursuivre la réparation de l'alignement vertical vers le bas le reste de votre side-by-side de la page.Le week-end, j'ai posté un nouveau projet sur codeplex qui implémente une HTML diff algorithme en C#. L'algorithme original a été écrit en Ruby. Je comprends que vous cherchiez un JavaScript de mise en œuvre, peut-être d'avoir un de disponible en C# avec le code source pourrait vous aider à port de l'algorithme. Voici le lien si vous êtes intéressés: htmldiff.codeplex.com. Vous pouvez en lire plus à ce sujet ici.
Mise à JOUR: Cette bibliothèque a été déplacé à GitHub.
J'ai fini par avoir besoin de quelque chose de similaire un certain temps en arrière. Pour obtenir le code HTML à la ligne de côté à l'autre, vous pouvez utiliser deux iFrames, mais vous pouvez avoir à lier leurs défilement ensemble via javascript que vous faites défiler (si vous vous permettent de faire défiler).
Pour voir la diff, cependant, vous serez plus que probablement souhaitez utiliser un autre bibliothèque. J'ai utilisé DaisyDiff, une bibliothèque Java, pour un projet similaire où mon client était content de voir un seul de rendu HTML du contenu avec MS Word "suivi des modifications"-comme le balisage.
HTH
Envisager d'utiliser la sortie de liens ou de lynx pour rendre une version texte de l'html, et ensuite diff qui.
Ce sujet DaisyDiff (Java et PHP des versions disponibles).
Fonctionnalités suivantes sont vraiment sympa:
Donc, vous vous attendez à
et
être considérés de la même manière?
La sortie dépend beaucoup de l'Agent Utilisateur. Comme Ionut Anghelcovici suggère, de faire une image. Faire un pour chaque navigateur que vous vous souciez.
Utiliser le balisage mode de Jolies Diff pour HTML. Il est entièrement écrit en JavaScript.
http://prettydiff.com/
Si c'est du XHTML (qui suppose beaucoup de ma part) serait le Xml Diff Patch Trousse d'outils de l'aide? http://msdn.microsoft.com/en-us/library/aa302294.aspx
Pour les petites différences que vous pourriez être en mesure de faire un texte normal-diff, et ensuite analyser le manque ou de l'insertion des pièces pour voir comment le résoudre, mais pour les grandes différences que vous allez avoir une période très difficile de faire cela.
Par exemple, comment voulez-vous détecter, et de montrer, qu'un alignement à gauche de l'image (flottant à gauche d'un paragraphe de texte) est soudainement devenu aligné à droite?
À l'aide d'un texte diffèrent va briser sur la non-trivial documents.
En fonction de ce que vous pensez est intuitive, XML diffère va probablement générer des différences qui ne sont pas très bonnes pour le texte avec des balises.
Autant que je sache, DaisyDiff est la seule bibliothèque spécialisée en HTML. Il fonctionne très bien pour un sous-ensemble du langage HTML.
Si vous travailliez avec Java et XHTML, XMLUnit permet de comparer deux documents XML via le org.custommonkey.xmlunit.DetailedDiff classe:
Je pense qu'une bonne façon de le faire est de afficher le code HTML d'une image et ensuite utiliser certains diff outil qui permet de comparer des images de repérer les différences.