Sugerencias sobre cómo compilar una herramienta HTML Diff?

Question

En this post pregunté si había alguna herramienta que comparara la estructura (no el contenido real) de 2 páginas HTML. Lo pido porque recibo plantillas HTML de nuestros diseñadores y con frecuencia me pierdo pequeños cambios de formato en mi implementación. Luego desperdicio algunas horas de tiempo de diseñador revisando mis páginas para encontrar mis errores.

El hilo ofrece algunas buenas sugerencias, pero no había nada que encajara en la factura. "Bien, entonces", pensé, "solo voy a sacar uno. Soy un desarrollador a mitad de camino, ¿cierto?".

Bueno, una vez que empecé a pensar en ello, no pude entender cómo hacerlo. Puedo generar un sitio web basado en datos con la suficiente facilidad, o realizar una implementación de CMS, o lanzar documentos dentro y fuera de BizTalk todo el día. No se puede comenzar a descubrir cómo comparar documentos HTML.

Bueno, claro, tengo que leer el DOM e iterar a través de los nodos. Tengo que asignar la estructura a alguna estructura de datos (¿cómo?), Y luego compararlos (¿cómo?). Es una tarea de desarrollo como ninguna que haya intentado.

Así que ahora que he identificado una debilidad en mi conocimiento, estoy aún más desafiado para resolver esto. ¿Alguna sugerencia sobre cómo comenzar?

aclaración: el contenido real no es lo que yo quiero comparar - los chicos creativos llenan sus páginas con lorem, y utilizo un contenido real. En su lugar, quiero comparar la estructura:

 
<div class="foo">lorem ipsum<div>

es diferente que

 

<div class="foo">
<p>lorem ipsum<p>
<div>

Answer 1

abierto cada página en el navegador y guardarlos como archivos .htm. Compara los dos usando windiff.

Answer 2

@Mike - eso compararía todo, incluido el contenido de la página, que no quiere el póster original.

Suponiendo que tiene acceso al DOM del navegador (escribiendo un complemento de Firefox/IE o lo que sea), probablemente pondría todos los elementos HTML en un árbol, luego compararía los dos árboles. Si el nombre de la etiqueta es diferente, entonces el nodo es diferente. Es posible que desee dejar de enumerar en un cierto punto (es probable que no le interese span, negrita, cursiva, etc., ¿tal vez solo se preocupe por los divs?), Ya que algunas etiquetas son realmente el contenido, en lugar de la estructura, del página.

Answer 3

El DOM es una estructura de datos: es un árbol.

Answer 4

Ver esto previous post and accompanying answers.

Answer 5

no sé cualquier herramienta, pero sé que hay una manera simple de hacer esto:

• En primer lugar, utilizar una herramienta de expresión regular para quitarse todo el texto en el archivo HTML. Puede usar esta expresión regular para buscar el texto (?<=^|>)[^><]+?(?=<|$) y reemplazarlos por una cadena vacía (""), es decir, eliminar todo el texto. Después de este paso, tendrá todas las etiquetas de marcado HTML. Hay muchas herramientas gratuitas de expresión regular.
• Luego, repite el primer paso para el archivo HTML original.
• Por último, utiliza una herramienta diff para comparar los dos conjuntos de marcas HTML. Esto mostrará lo que falta entre un conjunto y el otro.

Answer 6

Ejecuta ambos archivos a través de la siguiente secuencia de comandos de Perl, luego usa diff -iw para hacer una distinción entre mayúsculas y minúsculas que ignora el espacio en blanco.

#! /usr/bin/perl -w 

use strict; 

undef $/; 

my $html = <STDIN>; 

while ($html =~ /\S/) { 
    if ($html =~ s/^\s*<//) { 
    $html =~ s/^(.*?)>// or die "malformed HTML"; 
    print "<$1>\n"; 
    } else { 
    $html =~ s/^([^<]+)//; 
    print "(text)\n"; 
    } 
} 

Answer 7

Este ha sido un excelente comienzo. Un poco más aclaraciones/comentarios:

• que probablemente no se preocupan por los identificadores, ya que ellos se .net mangle
• parte de la estructura estará en un repetidor u otro control, por lo que podría llegar a tener elementos que se repiten más o menos

pensamiento adicional: creo que un buen comienzo sería asumir el hTML es compatible con XHTML. Pude inferir el esquema (utilizando los nuevos métodos .net XmlSchemaInference) y luego diferir los esquemas. Luego puedo ver las diferencias y considerar si son significativas o no.

Answer 8

Si pudiera tacke este tema me gustaría hacer esto:

1. Plan de algún tipo de DOM para las páginas HTML. comienza en peso liviano y luego agrega más según sea necesario. Yo usaría un patrón compuesto para la estructura de datos. es decir, cada elemento tiene una colección de elementos secundarios del tipo de clase base.
2. Crea un analizador para analizar páginas html.
3. Usando el analizador carga el elemento html en el DOM.
4. Después de que las páginas se hayan cargado hasta el DOM, tiene la instantánea jerárquica de la estructura de las páginas html.
5. Siga iterando a través de cada elemento en ambos lados hasta el final del DOM. Encontrarás la diferencia en la estructura cuando tocas un tipo de elemento no coincidente.

En su ejemplo, usted tendría solo un objeto div elemento cargado en un lado, en el otro lado tendría un objeto elemento div cargado con 1 elemento hijo de tipo elemento párrafo. encienda su iterador, primero emparejará el elemento div, el segundo iterador emparejará el párrafo con nada. Usted tiene su diferencia estructural.

Answer 9

Creo que algunas de las sugerencias anteriores no tienen en cuenta que existen otras etiquetas en el HTML entre dos páginas que serían textualmente diferentes, pero el marcado HTML resultante es funcionalmente equivalente. Danimal enumera las identificaciones de control como un ejemplo.

Los siguientes dos marcas son functionlly idénticos, pero podría aparecer como diferente si, simplemente, en comparación tags:

<div id="ctl00_TopNavHome_DivHeader" class="header4">foo</div> 
<div class="header4">foo</div> 

que iba a sugerir Danimal escribir traducción HTML, que busca las etiquetas HTML y convierte tanto documentos en una versión simplificada de ambos que omite las etiquetas de identificación y cualquier otra etiqueta que designe como irrelevante. Es probable que tenga que ser un trabajo en progreso, ya que ignora ciertos atributos/etiquetas y luego se topa con otros nuevos que también desea ignorar.

Sin embargo, me gusta la idea de usar XmlSchemaInterface para reducirlo al esquema XML, y luego usar una herramienta diff que entienda las reglas XML.

Answer 10

Mi sugerencia es solo la forma básica de hacerlo ... Por supuesto, para abordar el problema que mencionó, se deben aplicar reglas adicionales aquí ...Que es en su caso, tenemos un elemento div correspondiente, y luego aplicamos las reglas de coincidencia de atributos/propiedades y lo que no ...

Para ser sincero, hay muchas reglas complicadas que se deben aplicar para la comparación, y no es simplemente un elemento de coincidencia simple con otro elemento. Por ejemplo, qué ocurre si tienes duplicados. p. 1 div elemento en un lado, y 2 div elemento en el otro lado. ¿Cómo vas a unir los elementos div que coinciden?

Hay muchos otros problemas complicados que encontrará en la palabra de comparación. Im hablando basado en la experiencia (parte de mi trabajo es maitain mi motor de comparación de texto de la compañía).

Answer 11

Ver herramienta http://www.semdesigns.com/Products/SmartDifferencer/index.html para una herramienta que se parametriza mediante gramática de idioma, y ​​produce deltas en términos de elementos de lenguaje (identificadores, expresiones, instrucciones, bloques, métodos, ...) insertados, eliminados, movidos, reemplazados o con identificadores sustituido a través de él consistentemente. Esta herramienta ignora el reformateo de espacios en blanco (por ejemplo, diferentes saltos de línea o diseños) y valores semidistinguibles (por ejemplo, sabe que 0x0F y 15 tienen el mismo valor). Esto se puede aplicar a HTML utilizando un analizador HTML.

EDITAR: 9/12/2009. Hemos construido una herramienta experimental SmartDiff utilizando un editor de HTML.

Answer 12

Si tuviera que hacer esto, primero aprendería HTML. (^ - ^) Luego construiría una herramienta que elimine todo el contenido real y luego lo guarde como un archivo para que pueda ser canalizado a través de WinDiff (u otra herramienta de fusión).

Answer 13

Echa un vistazo a más allá de comparar. Tiene una función de comparación XML que puede ayudarte.

Answer 14

También puede tener que considerar que el 'contenido' en sí podría contener un margen adicional por lo que probablemente valga la pena desmantelar todo dentro de ciertos elementos (como <div> s con ciertos ID o clases) antes de hacer su comparación. Por ejemplo:

<div id="mainContent"> 
<p>lorem ipsum etc..</p> 
</div> 

y

<div id="mainContent"> 
<p>Here is some real content<img class="someImage" src="someImage.jpg" /></p> 
<ul> 
<li>and</li> 
<li>some</li> 
<li>more..</li> 
</ul> 
</div> 

Answer 15

me gustaría utilizar (o contribuir a) html5lib y su salida SAX. Solo deslícese por las 2 secuencias de SAX buscando desajustes y resalte todo el subárbol correspondiente.

Answer 16

http://www.mugo.ca/Products/Dom-Diff

Funciona con FF 3.5. Todavía no he probado FF 3.6.

Answer 17

Pretty Diff puede hacer esto. Comparará la estructura del código solo independientemente de las diferencias con el espacio en blanco, los comentarios o incluso el contenido. Solo asegúrate de marcar la opción "Normalizar contenido y cadenas literales".

http://prettydiff.com/