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

StackOverflow https://stackoverflow.com/questions/31722

  •  09-06-2019
  •  | 
  •  

Pergunta

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

Para esclarecer, quero poder 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 idéia é que, se eu usar um editor WYSIWYG para meu conteúdo HTML, não quero mudar para HTML para fazer diferenças.Quero fazer isso com dois editores WYSIWYG lado a lado, talvez.Ou pelo menos exibir diferenças lado a lado de uma forma amigável ao usuário final.

Foi útil?

Solução

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

O HTML renderizado lado a lado tornará muito difícil o alinhamento vertical do seu diff.O alinhamento vertical é crucial para comparar diferenças lado a lado.Para melhorar o alinhamento vertical de uma comparação lado a lado, você pode inserir elementos HTML invisíveis em cada versão da comparação em "pontos de verificação" onde a comparação deve ser alinhada 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 diff e insira vários visibility:hidden <span>s ou minúsculo <div>s onde quer que suas versões lado a lado devam corresponder, de acordo com a diferença.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 sua comparação HTML renderizada será alinhada verticalmente até esse ponto de verificação e você poderá continuar reparando o alinhamento vertical no restante da página lado a lado.

Outras dicas

No fim de semana postei um novo projeto no codeplex que implementa um algoritmo de comparação HTML em C#.O algoritmo original foi escrito em Ruby.Entendo que você estava procurando uma implementação de 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.

ATUALIZAR: Esta biblioteca foi movida para GitHub.

Acabei precisando de algo semelhante há algum tempo.Para fazer com que o HTML se alinhe lado a lado, você pode usar dois iFrames, mas terá que vincular a rolagem deles via javascript enquanto rola (se permitir a rolagem).

Para ver a diferença, entretanto, você provavelmente desejará usar a biblioteca de outra pessoa.eu usei DaisyDiff, uma biblioteca Java, para um projeto semelhante em que meu cliente ficou satisfeito ao 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 depois diferenciá-la.

A respeito DaisyDiff (Java e PHP versões disponíveis).

Os seguintes recursos são muito bons:

  • Funciona com HTML mal formado que pode ser encontrado "na natureza".
  • A comparação é mais especializada 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, a fonte HTML pode ser diferenciada de forma coerente.
  • Fornece descrições fáceis de entender das alterações.
  • A GUI padrão permite fácil navegação nas 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 User Agent.Como Ionut Anghelcovici sugere, faça uma imagem.Faça um para cada navegador de seu interesse.

Use o modo de marcação do Pretty Diff para HTML.Está 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ê poderá fazer uma comparação de texto normal e, em seguida, analisar as peças ausentes ou inseridas para ver como resolvê-las, mas para diferenças maiores, você terá muita dificuldade em fazer isso.

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

Usar uma diferença de texto será interrompido em documentos não triviais.Dependendo do que você acha intuitivo, diferenças de XML provavelmente gerarão diferenças que não são muito boas para texto com marcação.ATÉ ONDE SEI, DaisyDiff é a única biblioteca especializada em HTML.Funciona muito bem para um subconjunto de HTML.

Se você estava trabalhando com Java e XHTML, Unidade XML permite comparar dois documentos XML através do org.custommonkey.xmlunit.DetailedDiff aula:

Compara e descreve todas as diferenças entre dois documentos XML.A comparação de documentos não para quando a primeira diferença irrecuperável é encontrada, diferentemente da classe DIFF.

Acredito que uma boa maneira de fazer isso é renderizar o HTML para uma imagem e então use alguns ferramenta diff que pode comparar imagens para detectar as diferenças.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top