任何人都有渲染HTML的差异算法？ [英] Anyone have a diff algorithm for rendered HTML?

问题描述

我有兴趣看到一个很好的差异算法，可能用Javascript来渲染两个HTML页面的并排比较。这个想法是diff会显示呈现的 HTML的差异。

为了澄清，我希望能够看到侧面并行diffs 作为呈现的输出。所以，如果我删除一个段落，并排视图将知道正确的空间。

---

@Josh确切地说。虽然也许它会显示红色或其他东西删除的文字。这个想法是，如果我为我的HTML内容使用所见即所得的编辑器，我不想切换到HTML来做差异。我想和两个WYSIWYG编辑并排做。或者至少在最终用户友好的事情中并排显示差异。 解决方案

还有另一个很好的技巧可以使用以显着改善呈现的HTML差异的外观。虽然这并不能完全解决最初的问题，但它会在渲染HTML差异的外观上产生显着差异。

并排呈现的HTML将使你的差异非常难以垂​​直排列。垂直对齐对比较并排差异是至关重要的。为了改善并排差异的垂直对齐，您可以在差异的每个版本中在差异应该垂直对齐的检查点处插入不可见的HTML元素。然后，您可以使用一些客户端JavaScript在检查点周围添加垂直间距，直到两边垂直排列。

更详细地解释：

如果您想使用这种技术，运行您的差异算法并插入一堆 visibility：hidden 根据差异，              然后运行JavaScript来查找每个检查点（以及它的并排邻居），并将垂直间距添加到页面上较高（较浅）的检查点。现在，您呈现的HTML差异将垂直对齐到该检查点，并且您可以继续修复垂直对齐，并排放到并排页面的其余部分。

I'm interested in seeing a good diff algorithm, possibly in Javascript, for rendering a side-by-side diff of two HTML pages. The idea would be that the diff would show the differences of the rendered HTML.

To clarify, I want to be able to see the side-by-side diffs as rendered output. So if I delete a paragraph, the side by side view would know to space things correctly.

---

@Josh exactly. Though maybe it would show the deleted text in red or something. The idea is that if I use a WYSIWYG editor for my HTML content, I don't want to have to switch to HTML to do diffs. I want to do it with two WYSIWYG editors side by side maybe. Or at least display diffs side-by-side in an end-user friendly matter.

解决方案

There's another nice trick you can use to significantly improve the look of a rendered HTML diff. Although this doesn't fully solve the initial problem, it will make a significant difference in the appearance of your rendered HTML diffs.

Side-by-side rendered HTML will make it very difficult for your diff to line up vertically. Vertical alignment is crucial for comparing side-by-side diffs. In order to improve the vertical alignment of a side-by-side diff, you can insert invisible HTML elements in each version of the diff at "checkpoints" where the diff should be vertically aligned. Then you can use a bit of client-side JavaScript to add vertical spacing around checkpoint until the sides line up vertically.

Explained in a little more detail:

If you want to use this technique, run your diff algorithm and insert a bunch of visibility:hidden <span>s or tiny <div>s wherever your side-by-side versions should match up, according to the diff. Then run JavaScript that finds each checkpoint (and its side-by-side neighbor) and adds vertical spacing to the checkpoint that is higher-up (shallower) on the page. Now your rendered HTML diff will be vertically aligned up to that checkpoint, and you can continue repairing vertical alignment down the rest of your side-by-side page.

这篇关于任何人都有渲染HTML的差异算法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！