¿Alguien tiene un algoritmo de diferenciación para HTML renderizado?[cerrado]

Question

Estoy interesado en ver un buen algoritmo de diferenciación, posiblemente en Javascript, para representar una diferenciación en paralelo de dos páginas HTML.La idea sería que la diferencia mostrara las diferencias de los prestado HTML.

Para aclarar, quiero poder ver las diferencias una al lado de la otra. como salida renderizada.Entonces, si elimino un párrafo, la vista de lado a lado sabrá 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.Quizás quiero hacerlo con dos editores WYSIWYG uno al lado del otro.O al menos mostrar las diferencias una al lado de la otra de manera fácil para el usuario final.

Answer 1

Hay otro buen truco que puedes usar 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 las diferencias HTML renderizadas.

El HTML renderizado lado a lado hará que sea muy difícil que su diferencia se alinee verticalmente.La alineación vertical es crucial para comparar diferencias una al lado de la otra.Para mejorar la alineación vertical de una diferencia en paralelo, puede insertar elementos HTML invisibles en cada versión de la diferencia en los "puntos de control" donde la diferencia debe estar alineada verticalmente.Luego puedes 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 diferenciación e inserte un montón de visibility:hidden <span>s o diminuto <div>Es donde deben coincidir sus versiones lado a lado, según la diferencia.Luego ejecute JavaScript que encuentre cada punto de control (y su vecino de lado a lado) y agregue espacio vertical al punto de control que está más arriba (menos profundo) en la página.Ahora su diferencia HTML renderizada se alineará verticalmente hasta ese punto de control y podrá continuar reparando la alineación vertical en el resto de su página de lado a lado.

Answer 2

Durante el fin de semana publiqué un nuevo proyecto en codeplex que implementa un algoritmo de diferenciación 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í os dejo el enlace por si os interesa: htmldiff.codeplex.com.Puedes leer más sobre esto. aquí.

ACTUALIZAR: Esta biblioteca ha sido trasladada a GitHub.

Answer 3

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 vincular su desplazamiento mediante javascript a medida que se desplaza (si permite el desplazamiento).

Sin embargo, para ver la diferencia, lo más probable es que quieras utilizar la biblioteca de otra persona.solía MargaritaDiff, una biblioteca de Java, para un proyecto similar en el que mi cliente estaba satisfecho con ver una única representación HTML del contenido con un marcado similar a "seguimiento de cambios" de MS Word.

HT

Answer 4

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

Answer 5

Qué pasa MargaritaDiff (Java y PHP versiones disponibles).

Las siguientes características son realmente buenas:

• 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 provocará que se cambie todo el nodo.
• Además de la diferenciación visual predeterminada, la fuente HTML se puede diferenciar de forma coherente.
• Proporciona descripciones fáciles de entender de los cambios.
• La GUI predeterminada permite una fácil navegación de las modificaciones a través de atajos de teclado y enlaces.

Answer 6

Entonces, esperas

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

y

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

para ser considerado igual?

El resultado depende en gran medida del agente de usuario.Como Ionut Anghelcovici sugiere, haz una imagen.Haga uno para cada navegador que le interese.

Answer 7

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

http://prettydiff.com/

Answer 8

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

Answer 9

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 resolverlo, pero para diferencias más grandes, le resultará muy difícil hacerlo.

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) de repente se alinea a la derecha?

Answer 10

El uso de una diferencia de texto 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 texto con marcado.HASTA DONDE SE, MargaritaDiff es la única biblioteca especializada en HTML.Funciona muy bien para un subconjunto de HTML.

Answer 11

Si estuviera trabajando con Java y XHTML, Unidad XML le permite comparar dos documentos XML a través del org.custommonkey.xmlunit.DetailedDiff clase:

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 12

Creo que una buena manera de hacer esto es renderizar el HTML en una imagen y luego usar algunos herramienta de diferenciación que puede comparar imágenes para detectar las diferencias.