Qualcuno ha un algoritmo di differenza per l'HTML renderizzato?[Chiuso]

Question

Sono interessato a vedere un buon algoritmo di confronto, possibilmente in Javascript, per il rendering di un confronto affiancato di due pagine HTML.L'idea sarebbe che il diff mostri le differenze di reso HTML.

Per chiarire, voglio essere in grado di vedere le differenze affiancate COME output renderizzato.Quindi, se elimino un paragrafo, la vista affiancata saprebbe distanziare 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 eseguire le differenze.Forse voglio farlo con due editor WYSIWYG fianco a fianco.O almeno visualizzare le differenze fianco a fianco in modo intuitivo per l'utente finale.

Answer 1

C'è un altro bel trucco che puoi usare per migliorare significativamente l'aspetto di un diff HTML renderizzato.Anche se questo non risolve completamente il problema iniziale, farà una differenza significativa nell'aspetto delle differenze HTML renderizzate.

Il rendering HTML affiancato renderà molto difficile l'allineamento verticale del tuo confronto.L'allineamento verticale è fondamentale per confrontare le differenze affiancate.Per migliorare l'allineamento verticale di un confronto affiancato, puoi inserire elementi HTML invisibili in ciascuna versione del confronto nei "punti di controllo" in cui il confronto dovrebbe essere allineato verticalmente.Quindi puoi utilizzare un po' di JavaScript lato client per aggiungere spaziatura verticale attorno al checkpoint finché i lati non si allineano verticalmente.

Spiegato un po' più nel dettaglio:

Se vuoi usare questa tecnica, esegui il tuo algoritmo diff e inserisci un mucchio di visibility:hidden <span>s o minuscolo <div>È ovunque le tue versioni affiancate dovrebbero corrispondere, in base alla differenza.Quindi esegui JavaScript che trova ciascun checkpoint (e il suo vicino affiancato) e aggiunge la spaziatura verticale al checkpoint più in alto (meno profondo) sulla pagina.Ora la tua differenza HTML renderizzata sarà allineata verticalmente fino a quel punto di controllo e potrai continuare a riparare l'allineamento verticale lungo il resto della pagina affiancata.

Answer 2

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

AGGIORNAMENTO: Questa libreria è stata spostata in GitHub.

Answer 3

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

Per vedere la differenza, tuttavia, molto probabilmente vorrai utilizzare la libreria di qualcun altro.ero solito 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 simile al "traccia modifiche" di MS Word.

HTH

Answer 4

Prendi in considerazione l'utilizzo dell'output di link o lynx per eseguire il rendering di una versione di solo testo dell'html, quindi confrontala.

Answer 5

Che dire DaisyDiff (Giava E PHP versioni disponibili).

Le seguenti funzionalità sono davvero interessanti:

• Funziona con HTML mal formato che può essere trovato "in the wild".
• La differenza è più specializzata in HTML rispetto all'albero XML.La modifica di parte di un nodo di testo non comporterà la modifica dell'intero nodo.
• Oltre alla differenza visiva predefinita, il sorgente HTML può essere differenziato 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.

Answer 6

Quindi, ti aspetti

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

E

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

essere considerato uguale?

L'output dipende molto dall'User Agent.Come suggerisce Ionut Anghelvici, crea un'immagine.Creane uno per ogni browser che ti interessa.

Answer 7

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

http://prettydiff.com/

Answer 8

Se si tratta di XHTML (che presuppone molto da parte mia) Xml Diff Patch Toolkit potrebbe essere d'aiuto? http://msdn.microsoft.com/en-us/library/aa302294.aspx

Answer 9

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

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

Answer 10

L'utilizzo di una differenza di testo si interromperà su documenti non banali.A seconda di ciò che ritieni intuitivo, le differenze XML probabilmente genereranno differenze che non sono molto utili per il testo con markup.PER QUANTO NE SO, DaisyDiff è l'unica libreria specializzata in HTML.Funziona benissimo per un sottoinsieme di HTML.

Answer 11

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

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

Answer 12

Credo che un buon modo per farlo sia eseguire il rendering dell'HTML in un'immagine e poi usarne alcuni strumento diff in grado di confrontare le immagini per individuare le differenze.