Qualcuno ha un algoritmo diff per l'HTML renderizzato?

2022-07-29 11:30:22

Chiuso. Questa domanda non soddisfa le linee guida sull'overflow dello stack. Attualmente non accetta risposte.

Non consentiamo domande che richiedono consigli per libri, strumenti, librerie di software e altro ancora. Puoi modificare la domanda in modo da poterla rispondere con fatti e citazioni.

Chiuso 7 anni fa.

Migliora questa domanda

Mi interessa vedere un buon algoritmo di differenza, possibilmente in Javascript, per il rendering di una differenza affiancata di due pagine HTML. L'idea sarebbe che la differenza mostri le differenze dell'HTML renderizzato.

Per chiarire, voglio essere in grado di vedere le differenze affiancate come visualizzate nell'output. Quindi, se elimino un paragrafo, la vista affiancata saprebbe distanziare le cose correttamente.

@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 le differenze. Voglio farlo con due editor WYSIWYG fianco a fianco, forse. O almeno mostra le differenze fianco a fianco in una questione di facile utilizzo.

- Haacked

Source

Risposta

C'è un altro bel trucco che puoi usare per migliorare significativamente l'aspetto di una differenza HTML renderizzata. Sebbene ciò non risolva completamente il problema iniziale, farà una differenza significativa nell'aspetto delle differenze HTML renderizzate.

L'HTML con rendering affiancato renderà molto difficile l'allineamento verticale del differenziale. L'allineamento verticale è fondamentale per confrontare le differenze affiancate. Per migliorare l'allineamento verticale di una differenza affiancata, puoi inserire elementi HTML invisibili in ogni versione della differenza nei "punti di controllo" in cui la differenza dovrebbe essere allineata 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ù in dettaglio:

Se vuoi usare questa tecnica, esegui il tuo algoritmo diff e inserisci un gruppo di visibility:hidden <span>s o minuscoli }^{< /z>s ovunque le tue versioni affiancate dovrebbero corrispondere, in base alla differenza. Quindi esegui JavaScript che trova ogni checkpoint (e il suo vicino affiancato) e aggiunge la spaziatura verticale al checkpoint che è più in alto (più basso) nella pagina. Ora la tua differenza HTML renderizzata sarà allineata verticalmente fino a quel punto di controllo e puoi continuare a riparare l'allineamento verticale lungo il resto della tua pagina affiancata.

Qualcuno ha un algoritmo diff per l'HTML renderizzato?

Risposta

Tag simili

domande correlate