¿Alguien tiene un algoritmo diff para HTML procesado?

Question

Estoy interesado en ver un buen algoritmo de diferencias, posiblemente en Javascript, para representar una diferencia lado a lado de dos páginas HTML. La idea sería que el diff mostraría las diferencias del prestado HTML.

Para aclarar, quiero ser capaz de ver los difs lado a lado como salida representada. Entonces, si borro un párrafo, la vista de lado a lado sabría separar las cosas correctamente.

---

@Josh exactamente. Aunque tal vez mostraría el texto borrado en rojo o algo así. La idea es que si uso un editor WYSIWYG para mi contenido HTML, no quiero tener que cambiar a HTML para hacer diffs. Quiero hacerlo con dos editores WYSIWYG uno al lado del otro, tal vez. O al menos mostrar las diferencias lado a lado en un asunto fácil para el usuario final.

Answer 1

Hay otro buen truco que puede utilizar para mejorar significativamente el aspecto de una diferencia HTML procesada. Aunque esto no resuelve completamente el problema inicial, supondrá una gran diferencia en la apariencia de los diffs de HTML renderizados.

HTML lado a lado renderizado hará que sea muy difícil que su diff se alinee verticalmente. La alineación vertical es crucial para comparar diferencias de lado a lado. Para mejorar la alineación vertical de un diff lado a lado, puede insertar elementos HTML invisibles en cada versión del diff en "puntos de control" donde el diff debe estar alineado verticalmente. Luego puede usar un poco de JavaScript del lado del cliente para agregar espacio vertical alrededor del punto de control hasta que los lados se alineen verticalmente.

Se explica en detalle un poco más:

Si desea utilizar esta técnica, ejecutar el algoritmo de diferencias y de insertar un montón de visibility:hidden<span> s o pequeñas <div> s dondequiera que sus versiones de lado a lado, deben unirse de acuerdo con la diferencia A continuación, ejecute JavaScript que encuentre cada punto de control (y su vecino lado a lado) y agregue espaciado vertical al punto de control que está más arriba (menos profundo) en la página. Ahora su diferencia de HTML renderizado estará verticalmente alineada hasta ese punto de control, y puede continuar reparando la alineación vertical en el resto de su página contigua.

Answer 2

Creo que una buena manera de hacerlo es a render the HTML to an image y luego utilice diff tool that can compare images para detectar las diferencias.

Answer 3

Por lo tanto, se espera

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

y

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

a ser considerada la misma?

La salida depende en gran medida del agente de usuario. Como Ionut Anghelcovici suggests, crea una imagen. Haga uno por cada navegador que le interese.

Answer 4

Si es XHTML (que asume mucho de mi parte), ¿podría ayudar el Xml Diff Patch Toolkit? http://msdn.microsoft.com/en-us/library/aa302294.aspx

Answer 5

Para pequeñas diferencias, es posible que pueda hacer una diferencia de texto normal, y luego analizar las piezas faltantes o insertadas para ver cómo resolverlas, pero para cualquier diferencia mayor, va a ser muy difícil haciendo esto.

Por ejemplo, ¿cómo detectaría y mostraría que una imagen alineada a la izquierda (flotante a la izquierda de un párrafo de texto) se ha alineado repentinamente a la derecha?

Answer 6

Terminé necesitando algo similar un tiempo atrás. Para que el HTML se alinee de lado a lado, puede usar dos iFrames, pero luego tendrá que unir su desplazamiento mediante javascript mientras se desplaza (si permite el desplazamiento).

Para ver la diferencia, sin embargo, lo más probable es que desee utilizar la biblioteca de otra persona. Usé DaisyDiff, una biblioteca de Java, para un proyecto similar en el que mi cliente estaba contento de ver una sola representación HTML del contenido con "cambios de seguimiento" de MS Word, como el marcado.

HTH

Answer 7

Usando un texto difiere romperá en documentos no triviales. Dependiendo de lo que piense que es intuitivo, XML difiere probablemente generará diferencias que no son muy buenas para el texto con marcado. AFAIK, DaisyDiff es la única biblioteca especializada en HTML. Funciona muy bien para un subconjunto de HTML.

Answer 8

Si estaba trabajando con Java y XHTML, XMLUnit le permite comparar dos documentos XML a través de la clase org.custommonkey.xmlunit.DetailedDiff:

Compara y describe todas las diferencias entre dos documentos XML. La comparación de documentos no se detiene una vez que se encuentra la primera diferencia irrecuperable , a diferencia de la clase Diff .

Answer 9

Considere el uso de la salida de enlaces o lince para representar una versión de solo texto del html y luego difrúndalo.

Answer 10

Utilice el modo de marcado de Pretty Diff para HTML. Está escrito completamente en JavaScript.

http://prettydiff.com/

Answer 11

¿Qué hay de DaisyDiff (Java y PHP vesions disponibles).

Las siguientes características son muy agradables:

• Funciona con HTML mal formado que se pueden encontrar "en la naturaleza".
• La diferenciación es más especializada en HTML que el árbol XML. Cambiar parte de un nodo de texto no hará que se cambie todo el nodo.
• Además de la diferencia visual predeterminada, la fuente HTML se puede diferir coherentemente.
• Proporciona descripciones fáciles de entender de los cambios.
• La GUI predeterminada permite una fácil exploración de las modificaciones a través de atajos de teclado y enlaces.

Answer 12

Durante el fin de semana publiqué un nuevo proyecto en codeplex que implementa un algoritmo HTML diff en C#. El algoritmo original fue escrito en Ruby. Entiendo que estabas buscando una implementación de JavaScript, quizás tener una disponible en C# con el código fuente podría ayudarte a portar el algoritmo. Aquí está el enlace si está interesado: htmldiff.codeplex.com.Puede leer más al respecto here.

ACTUALIZACIÓN: Esta biblioteca se ha movido a GitHub.