18

A description of what I'm going to accomplish:

  • Input 2 (N is not essential) HTML documents.
  • Standardize the HTML format
  • Diff the two documents -- external styles are not important but anything inline to the document will be included.
  • Determine delta at the HTML Block Element level.

Expanding the last point:

Imagine two pages of the same site that both share a sidebar with what was probably a common ancestor that has been copy/pasted. Each page has some minor changes to the sidebar. The diff will reveal these changes, then I can "walk up" the DOM to find the first common block element shared by them, or just default to <body>. In this case, I'd like to walk it up and find that, oh, they share a common <div id="sidebar">.

I'm familiar with DaisyDiff and the application is similar -- in the CMS world.

I've also begun playing with the google diff-patch library.

I wanted to give ask this kind of non-specific question to hopefully solicit any advise or guidance that anybody thinks could be helpful. Currently if you put a gun to my head and said "CODE IT" I'd rewrite DaisyDiff in Python and add-in this block-level logic. But I thought maybe there's a better way and the answers to Anyone have a diff algorithm for rendered HTML? made me feel warm and fuzzy.

Community
  • 1
  • 1
Shane H
  • 3,263
  • 5
  • 26
  • 30
  • 1
    Related: http://stackoverflow.com/questions/1576459/generate-pretty-diff-html-in-python . – Juho Vepsäläinen Sep 29 '12 at 17:56
  • I'm not sure of your exact application but a DOM ranking algorithm is used by projects like http://www.readability.com/ to extract relevant content. If you want to diff only on the core of the page, something like that might make sense – Pratik Mandrekar Oct 06 '12 at 17:46
  • Would love to hear an update about this project; if you managed to find what you were looking for and if you plan on open sourcing any of it :) – onassar Jan 17 '13 at 04:41
  • Profiled a lot of the libraries here: http://web.onassar.com/blog/2012/11/21/htmldiff-software-discoveries/ – onassar Feb 23 '13 at 06:09

3 Answers3

9

If you were going to start from scratch, a useful search term would be "tree diff".

There's a pretty awesome blog post here, although I just found it by googling "daisydiff python" so I bet you've already seen it. Besides all the interesting theoretical stuff, he mentions the existence of Logilab's xmldiff, an open-source XML differ written in Python. That might be a decent starting point — maybe less correct than trying to wrap or reimplement DaisyDiff, but probably easier to get up and running quickly.

There's also html-tree-diff on pypi, which I found via this Quora link: http://www.quora.com/Is-there-any-good-Python-implementation-of-a-tree-diff-algorithm

There's some theoretical stuff about tree diffing at efficient diff algorithm for trees and Levenshtein distance on cstheory.stackexchange.

BTW, just to clarify, you are talking about diffing two DOM trees, but not necessarily rendering the diff/merge back into any particular HTML, right? (EDIT: Right.) A lot of the similarly-worded questions on here are really asking "how can I color deleted lines red and added lines green" or "how can I make matching paragraphs line up visually", skipping right over the theoretical hard part of "how do I diff two DOM trees in the first place" and the practical hard part of "how do I parse possibly malformed HTML into a DOM tree even before that". :)

Community
  • 1
  • 1
Quuxplusone
  • 23,928
  • 8
  • 94
  • 159
  • That's correct -- There's a ton of noise in this area about people who want to render a diff in HTML the way you described. I don't care about that, I won't be rendering the diff at all but instead use the output block-element deltas to drive more powerful visualizations of the differences between different pages and versions of the same page. Appreciate your input, this isn't like anything I've built before and I wanted to try to make sure I'm not over thinking it or missing anything obvious. – Shane H Oct 04 '12 at 18:42
1

I know this questions is related to python but you could take a look 3DM - XML 3-way Merging and Differencing Tool (default implementation in java) but here is the actual paper describing the algorithm used http://www.cs.hut.fi/~ctl/3dm/thesis.pdf, and here is the link to the site.

Drawback to this is that you do have to cleanup the document and be able to pars it as XML.

Greg
  • 1,671
  • 2
  • 15
  • 30
1

You could start by using beautifulsoup to parse both documents.

Then you have a choice:

  • use prettify to render both documents as more or less standardized HTML and diff those.
  • compare the parse trees.

The latter allows you to e.g. discard elements that only affect the presentation, not the content. The former is probably easier.

Roland Smith
  • 42,427
  • 3
  • 64
  • 94