Qualcuno ha un algoritmo diff per HTML renderizzato? [chiuso]

Mi interessa vedere un buon algoritmo di diff, possibilmente in Javascript, per il rendering di un diff side-by-side di due pagine HTML. L'idea sarebbe che il diff mostrasse le differenze dell'HTML reso .

Per chiarire, voglio essere in grado di vedere i diff side-by-side come output renderizzato. Quindi, se elimino un paragrafo, la vista affiancata saprebbe spaziare correttamente le cose.

@ Josh esattamente. Anche se forse mostrerebbe il testo cancellato in rosso o qualcosa del genere. L'idea è che se utilizzo un editor WYSIWYG per il mio contenuto HTML, non voglio dover passare all'HTML per fare differenze. Forse voglio farlo con due editor WYSIWYG fianco a fianco. O almeno mostra le differenze fianco a fianco in una questione amichevole per l'utente finale.

C'è un altro bel trucco che puoi usare per migliorare in modo significativo l'aspetto di un diff HTML renderizzato. Sebbene questo non risolva completamente il problema iniziale, farà una differenza significativa nell'aspetto delle differenze HTML renderizzate.

HTML renderizzato fianco a fianco renderà molto difficile l'allineamento verticale del tuo diff. L'allineamento verticale è fondamentale per confrontare le differenze affiancate. Per migliorare l'allineamento verticale di un diff side-by-side, puoi inserire elementi HTML invisibili in ogni versione del diff nei "punti di controllo" dove il diff dovrebbe essere allineato verticalmente. Quindi puoi utilizzare un po 'di JavaScript lato client per aggiungere spaziatura verticale attorno al checkpoint fino a quando i lati non si allineano verticalmente.

Spiegato un po 'più in dettaglio:

Se vuoi usare questa tecnica, esegui il tuo algoritmo diff e inserisci un gruppo di visibility:hidden <span>s o minuscoli <div>s ovunque le tue versioni side-by-side dovrebbero corrispondere, secondo il diff. Quindi esegui JavaScript che trova ogni checkpoint (e il suo vicino fianco a fianco) e aggiunge la spaziatura verticale al checkpoint che è più in alto (meno profondo) nella pagina. Ora il tuo diff HTML renderizzato sarà allineato verticalmente fino a quel punto di controllo e puoi continuare a riparare l'allineamento verticale lungo il resto della tua pagina affiancata.

Durante il fine settimana ho pubblicato un nuovo progetto su codeplex che implementa un algoritmo di diff HTML in C #. L'algoritmo originale è stato scritto in Ruby. Mi risulta che stavi cercando un'implementazione JavaScript, forse averne una disponibile in C # con il codice sorgente potrebbe aiutarti a portare l'algoritmo. Ecco il link se sei interessato: htmldiff.codeplex.com . Puoi leggere di più al riguardo qui .

AGGIORNAMENTO: questa libreria è stata spostata su GitHub .

Ho finito per aver bisogno di qualcosa di simile un po 'di tempo fa. Per allineare l'HTML da un lato all'altro, potresti utilizzare due iFrame, ma dovresti quindi legare il loro scorrimento tramite javascript mentre scorri (se consenti lo scorrimento).

Per vedere la differenza, tuttavia, molto probabilmente vorrai usare la libreria di qualcun altro. Ho usato DaisyDiff , una libreria Java, per un progetto simile in cui il mio cliente era soddisfatto di vedere un singolo rendering HTML del contenuto con markup di "traccia modifiche" di MS Word.

HTH

Considera l'idea di utilizzare l'output di link o lynx per eseguire il rendering di una versione di solo testo dell'html, quindi diffonderla.

Che dire di DaisyDiff ( versioni Java e PHP disponibili).

Le seguenti funzionalità sono davvero carine:

• Funziona con HTML mal formato che può essere trovato "in natura".
• La differenza è più specializzata in HTML rispetto all'albero XML. La modifica di una parte di un nodo di testo non determinerà la modifica dell'intero nodo.
• Oltre al diff visivo predefinito, il sorgente HTML può essere diffuso in modo coerente.
• Fornisce descrizioni di facile comprensione delle modifiche.
• La GUI predefinita consente una facile navigazione delle modifiche tramite scorciatoie da tastiera e collegamenti.

Quindi, ti aspetti

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

e

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

essere considerato lo stesso?

L'output dipende molto dall'agente utente. Come suggerisce Ionut Anghelcovici , crea un'immagine. Fane uno per ogni browser che ti interessa.

Usa la modalità markup di Pretty Diff per HTML. È scritto interamente in JavaScript.

http://prettydiff.com/

Se è XHTML (il che presuppone molto da parte mia), Xml Diff Patch Toolkit sarebbe d'aiuto? http://msdn.microsoft.com/en-us/library/aa302294.aspx

Per differenze minori potresti essere in grado di eseguire una normale differenza di testo e quindi analizzare i pezzi mancanti o inseriti per vedere come risolverli, ma per eventuali differenze maggiori avrai difficoltà a farlo.

Ad esempio, come rilevereste e mostrereste che un'immagine allineata a sinistra (fluttuante a sinistra di un paragrafo di testo) è diventata improvvisamente allineata a destra?

L'uso di un testo diverso si interromperà su documenti non banali. A seconda di ciò che ritieni sia intuitivo, XML differ probabilmente genererà differenze che non sono molto buone per il testo con markup. Per quanto ne so, DaisyDiff è l'unica libreria specializzata in HTML. Funziona alla grande per un sottoinsieme di HTML.

Se stavi lavorando con Java e XHTML, XMLUnit ti consente di confrontare due documenti XML tramite la classe org.custommonkey.xmlunit.DetailedDiff :

Confronta e descrive tutte le differenze tra due documenti XML. Il confronto dei documenti non si ferma una volta trovata la prima differenza irrecuperabile, a differenza della classe Diff.

Credo che un buon modo per farlo sia rendere l'HTML in un'immagine e quindi utilizzare uno strumento diff che possa confrontare le immagini per individuare le differenze.