Alguém tem um algoritmo de diff para HTML renderizado? [fechadas]

Estou interessado em ver um bom algoritmo de diff, possivelmente em Javascript, para renderizar um diff lado a lado de duas páginas HTML. A ideia seria que o diff mostrasse as diferenças do HTML renderizado .

Para esclarecer, eu quero ser capaz de ver as diferenças lado a lado como saída renderizada. Portanto, se eu excluir um parágrafo, a visualização lado a lado saberá espaçar as coisas corretamente.

@Josh exatamente. Embora talvez mostrasse o texto excluído em vermelho ou algo assim. A ideia é que se eu usar um editor WYSIWYG para meu conteúdo HTML, não quero ter que mudar para HTML para fazer diffs. Eu quero fazer isso com dois editores WYSIWYG lado a lado, talvez. Ou, pelo menos, exiba as diferenças lado a lado de uma forma amigável ao usuário final.

Há outro truque legal que você pode usar para melhorar significativamente a aparência de um diff HTML renderizado. Embora isso não resolva totalmente o problema inicial, fará uma diferença significativa na aparência de suas diferenças HTML renderizadas.

O HTML renderizado lado a lado tornará muito difícil para o seu diff alinhar verticalmente. O alinhamento vertical é crucial para comparar diferenças lado a lado. Para melhorar o alinhamento vertical de um diff lado a lado, você pode inserir elementos HTML invisíveis em cada versão do diff nos "pontos de verificação" onde o diff deve ser alinhado verticalmente. Em seguida, você pode usar um pouco de JavaScript do lado do cliente para adicionar espaçamento vertical ao redor do ponto de verificação até que os lados se alinhem verticalmente.

Explicado com um pouco mais de detalhes:

Se você quiser usar esta técnica, execute seu algoritmo de diff e insira um monte de visibility:hidden <span>s ou minúsculos <div>s onde suas versões lado a lado devem coincidir, de acordo com o diff. Em seguida, execute o JavaScript que encontra cada ponto de verificação (e seu vizinho lado a lado) e adiciona espaçamento vertical ao ponto de verificação que está mais acima (mais raso) na página. Agora seu diff HTML renderizado será alinhado verticalmente até aquele ponto de verificação, e você pode continuar reparando o alinhamento vertical no resto da página lado a lado.

No fim de semana, postei um novo projeto no codeplex que implementa um algoritmo HTML diff em C #. O algoritmo original foi escrito em Ruby. Eu entendo que você estava procurando uma implementação JavaScript, talvez ter uma disponível em C # com código-fonte possa ajudá-lo a portar o algoritmo. Aqui está o link se você estiver interessado: htmldiff.codeplex.com . Você pode ler mais sobre isso aqui .

ATUALIZAÇÃO: esta biblioteca foi movida para o GitHub .

Acabei precisando de algo semelhante há algum tempo. Para que o HTML se alinhe lado a lado, você pode usar dois iFrames, mas então terá que amarrar a rolagem deles via javascript à medida que você rola (se permitir a rolagem).

Para ver a diferença, no entanto, você provavelmente desejará usar a biblioteca de outra pessoa. Eu usei DaisyDiff , uma biblioteca Java, para um projeto semelhante, onde meu cliente ficou feliz em ver uma única renderização HTML do conteúdo com marcação semelhante a "rastrear alterações" do MS Word.

HTH

Considere usar a saída de links ou lynx para renderizar uma versão somente texto do html e, em seguida, diferencie isso.

E sobre DaisyDiff ( versões Java e PHP disponíveis).

Os seguintes recursos são realmente bons:

• Funciona com HTML malformado que pode ser encontrado "na natureza".
• O diffing é mais especializado em HTML do que a árvore XML. Alterar parte de um nó de texto não fará com que todo o nó seja alterado.
• Além da comparação visual padrão, o código-fonte HTML pode ser diferenciado de forma coerente.
• Fornece descrições fáceis de entender das mudanças.
• A GUI padrão permite navegar facilmente pelas modificações por meio de atalhos de teclado e links.

Então, você espera

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

e

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

ser considerado o mesmo?

A saída depende muito do Agente do Usuário. Como sugere Ionut Anghelcovici , faça uma imagem. Faça um para cada navegador de seu interesse.

Use o modo de marcação de Pretty Diff para HTML. Ele é escrito inteiramente em JavaScript.

http://prettydiff.com/

Se for XHTML (o que pressupõe muito da minha parte), o Xml Diff Patch Toolkit ajudaria? http://msdn.microsoft.com/en-us/library/aa302294.aspx

Para diferenças menores, você pode ser capaz de fazer uma comparação de texto normal e, em seguida, analisar as peças ausentes ou inseridas para ver como resolvê-las, mas para quaisquer diferenças maiores, você terá muito trabalho para fazer isso.

Por exemplo, como você detectaria e mostraria que uma imagem alinhada à esquerda (flutuando à esquerda de um parágrafo de texto) repentinamente tornou-se alinhada à direita?

Usar um texto diferente irá quebrar em documentos não triviais. Dependendo do que você acha que é intuitivo, as diferenças de XML provavelmente geram diferenças que não são muito boas para texto com marcação. AFAIK, DaisyDiff é a única biblioteca especializada em HTML. Funciona muito bem para um subconjunto de HTML.

Se você estava trabalhando com Java e XHTML, XMLUnit permite comparar dois documentos XML por meio da classe org.custommonkey.xmlunit.DetailedDiff :

Compara e descreve todas as diferenças entre dois documentos XML. A comparação do documento não para quando a primeira diferença irrecuperável é encontrada, ao contrário da classe Diff.

Acredito que uma boa maneira de fazer isso é renderizar o HTML em uma imagem e, em seguida, usar alguma ferramenta de comparação que pode comparar as imagens para detectar as diferenças.