¿Alguien tiene un algoritmo de diferencias para HTML renderizado? [cerrado]

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

Para aclarar, quiero poder ver las diferencias lado a lado como salida renderizada. Entonces, si elimino un párrafo, la vista en paralelo sabría espaciar las cosas correctamente.

@Josh exactamente. Aunque tal vez mostraría el texto eliminado 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 diferencias. Quiero hacerlo con dos editores WYSIWYG uno al lado del otro, tal vez. O al menos mostrar las diferencias una al lado de la otra en un asunto amigable para el usuario final.

Hay otro buen truco que puede utilizar para mejorar significativamente el aspecto de una diferencia HTML renderizada. Aunque esto no resuelve completamente el problema inicial, marcará una diferencia significativa en la apariencia de sus diferencias HTML renderizadas.

El HTML renderizado lado a lado hará que sea muy difícil para su diff alinearse verticalmente. La alineación vertical es crucial para comparar diferencias de lado a lado. Para mejorar la alineación vertical de una diferencia de lado a lado, puede insertar elementos HTML invisibles en cada versión de la diferencia en "puntos de control" donde la diferencia debe estar alineada 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.

Explicado con un poco más de detalle:

Si desea utilizar esta técnica, ejecute su algoritmo de diferencias e inserte un montón de visibility:hidden <span>so minúsculos <div>donde sea que sus versiones lado a lado deberían coincidir, de acuerdo con el diff. Luego ejecute JavaScript que encuentre cada punto de control (y su vecino uno al lado del otro) y agregue espacio vertical al punto de control que está más arriba (menos profundo) en la página. Ahora su diferencia de HTML renderizada se alineará verticalmente hasta ese punto de control, y puede continuar reparando la alineación vertical en el resto de su página lado a lado.

Durante el fin de semana publiqué un nuevo proyecto en codeplex que implementa un algoritmo de diferenciación de HTML en C #. El algoritmo original fue escrito en Ruby. Entiendo que estaba buscando una implementación de JavaScript, tal vez tener una disponible en C # con código fuente podría ayudarlo a portar el algoritmo. Aquí está el enlace si está interesado: htmldiff.codeplex.com . Puedes leer más sobre esto aquí .

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

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

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

HTH

Considere usar la salida de enlaces o lynx para representar una versión de solo texto del html, y luego diferenciarlo.

¿Qué pasa con DaisyDiff ( versiones Java y PHP disponibles).

Las siguientes características son realmente agradables:

• Funciona con HTML mal formado que se puede encontrar "en la naturaleza".
• La diferenciación está más especializada en HTML que en 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, el código fuente HTML se puede diferenciar de forma coherente.
• Proporciona descripciones fáciles de entender de los cambios.
• La GUI predeterminada permite navegar fácilmente por las modificaciones a través de atajos de teclado y enlaces.

Entonces, esperas

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

y

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

ser considerado igual?

El resultado depende mucho del agente de usuario. Como sugiere Ionut Anghelcovici , haz una imagen. Haz uno para cada navegador que te interese.

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

http://prettydiff.com/

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

Para diferencias más pequeñas, 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 las diferencias más grandes, será muy difícil hacerlo.

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

El uso de un texto diferente se romperá en documentos no triviales. Dependiendo de lo que crea que es intuitivo, las diferencias XML probablemente generarán 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.

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.

Creo que una buena forma de hacer esto es renderizar el HTML en una imagen y luego usar alguna herramienta de diferencias que pueda comparar imágenes para detectar las diferencias.