Anyone have a diff algorithm for rendered HTML?

Question

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.

Sounds similar to this question: http://stackoverflow.com/questions/1061468/html-compare — rjmunro, Nov 17 '11 at 11:39
Old thread, but figured I'd give my 2 cents. I've been dealing with it a lot lately, and have found a bunch of libs: http://web.onassar.com/blog/2012/11/21/htmldiff-software-discoveries/ — onassar, Feb 23 '13 at 06:04
@Haacked Found a working solution ? I tried `prettydiff.com` but looks like it's broken. — coding_idiot, May 17 '19 at 04:46

Rohland · Answer 1 · 2012-04-11T07:08:59.070

17

Over the weekend I posted a new project on codeplex that implements an HTML diff algorithm in C#. The original algorithm was written in Ruby. I understand you were looking for a JavaScript implementation, perhaps having one available in C# with source code could assist you to port the algorithm. Here is the link if you are interested: htmldiff.codeplex.com. You can read more about it here.

UPDATE: This library has been moved to GitHub.

edited Apr 11 '12 at 07:08

answered Nov 02 '09 at 10:21

Rohland

1,405
14
20

4

The HTMLDiff algorithm has been ported in JavaScript (CoffeeScript), [here](https://github.com/tnwinc/htmldiff.js). – Florian Parain Nov 15 '12 at 08:59
Hi @pate, I believe these links aren't working anymore... – Tiago Cardoso Nov 25 '13 at 11:32
@TiagoCardoso deleted my dated comment. – Petrus Theron Nov 25 '13 at 12:43
@Rohland Awesome library! Really saved my day :) – Sirar Salih Sep 22 '15 at 08:31
I tried the js version, it works quite well in most cases, but it cannot seem to correctly detect difference in html tags when content is the same, i.e. abc changing to abc – Bill Yang Oct 07 '15 at 14:34
3

@Florian Parain: Thanks for sharing the link to https://github.com/tnwinc/htmldiff.js it works great! Tip for anyone who wants the JS version, simply install via "npm install htmldiff" and then use htmldiff.js in the "src" directory. – Elijah Lofgren Feb 09 '16 at 20:26

score 17 · Accepted Answer · edited Oct 03 '12 at 03:05

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.

score 4 · Answer 3 · answered Jan 12 '09 at 22:38

4

Consider using the output of links or lynx to render a text-only version of the html, and then diff that.

answered Jan 12 '09 at 22:38

Arafangion

11,517
1
40
72

score 4 · Answer 4 · answered Sep 15 '08 at 20:20

I ended up needing something similar awhile back. To get the HTML to line up side to side, you could use two iFrames, but you'd then have to tie their scrolling together via javascript as you scroll (if you allow scrolling).

To see the diff, however, you will more than likely want to use someone else's library. I used DaisyDiff, a Java library, for a similar project where my client was happy with seeing a single HTML rendering of the content with MS Word "track changes"-like markup.

HTH

score 2 · Answer 5 · answered Oct 20 '09 at 08:54

What about DaisyDiff (Java and PHP vesions available).

Following features are really nice:

Works with badly formed HTML that can be found "in the wild".
The diffing is more specialized in HTML than XML tree differs. Changing part of a text node will not cause the entire node to be changed.
In addition to the default visual diff, HTML source can be diffed coherently.
Provides easy to understand descriptions of the changes.
The default GUI allows easy browsing of the modifications through keyboard shortcuts and links.

score 1 · Answer 6 · edited Feb 08 '11 at 22:34

1

Use the markup mode of Pretty Diff for HTML. It is written entirely in JavaScript.

http://prettydiff.com/

edited Feb 08 '11 at 22:34

austincheney

9
3

answered Sep 10 '09 at 19:07

1

Does it support rendered diffs? I can't find the option. – Joel Peltonen Dec 10 '12 at 13:57
2

Downvoted as I couldn't find the rendered diff. – Tiago Cardoso Nov 25 '13 at 11:33

score 1 · Answer 7 · edited May 23 '17 at 11:54

1

So, you expect

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

and

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

to be considered the same?

The output depends very much on the User Agent. Like Ionut Anghelcovici suggests, make an image. Do one for every browser you care about.

edited May 23 '17 at 11:54

Community

1
1

answered Aug 28 '08 at 06:43

Josh

7,936
5
41
63

score 0 · Answer 8 · answered Oct 05 '08 at 23:16

Using a text differ will break on non-trivial documents. Depending on what you think is intuitive, XML differs will probably generate diffs that aren't very good for text with markup. AFAIK, DaisyDiff is the only library specialized in HTML. It works great for a subset of HTML.

score 0 · Answer 9 · answered Oct 05 '08 at 23:52

If you were working with Java and XHTML, XMLUnit allows you to compare two XML documents via the org.custommonkey.xmlunit.DetailedDiff class:

Compares and describes all the differences between two XML documents. The document comparison does not stop once the first unrecoverable difference is found, unlike the Diff class.

score 0 · Answer 10 · answered Sep 15 '08 at 19:39

0

If it is XHTML (which assumes a lot on my part) would the Xml Diff Patch Toolkit help? http://msdn.microsoft.com/en-us/library/aa302294.aspx

answered Sep 15 '08 at 19:39

MotoWilliams

1,538
1
12
22

score 0 · Answer 11 · answered Sep 15 '08 at 19:45

For smaller differences you might be able to do a normal text-diff, and then analyse the missing or inserted pieces to see how to resolve it, but for any larger differences you're going to have a very tough time doing this.

For instance, how would you detect, and show, that a left-aligned image (floating left of a paragraph of text) has suddenly become right-aligned?

score -6 · Answer 12 · answered Aug 28 '08 at 06:42

-6

I believe a good way to do this is to render the HTML to an image and then use some diff tool that can compare images to spot the differences.

answered Aug 28 '08 at 06:42

Any misalignment in these two images will of course produce massive differences, where the actual difference is just miniscule, like a table being one pixel higher in one of the two pages. – Lasse V. Karlsen Sep 15 '08 at 19:42

Anyone have a diff algorithm for rendered HTML?

12 Answers12

Linked

Related