Are there any libraries for showing diffs between two web pages?

Question

I am looking for a library in any language--preferably PHP though--that will display the difference between two web pages. The differences can be displayed side-by-side, all in one document, or in any other creative way.

Examples of what this would look like:

• http://1.bp.blogspot.com/_pLC3YDiv_I4/SBZPYQMDsPI/AAAAAAAAADk/wUMxK307jXw/s1600-h/wikipediadiff.jpg
• http://www.rohland.co.za/wp-content/uploads/2009/10/html_diff_output_text.PNG

I am NOT looking for raw code diffing, like this: http://thinkingphp.org/img/code_coverage_html_diff_view.png. I do NOT want to show the difference between two sets of HTML. I want to show differences in rendered, WYSIWYG form.

Every solution I tried suffered from one or more of the following problems:

• If I change the attribute of an element (eg. change [table border="1"] to [table border="2"]), then I'll have an extra table tag in the output (eg. [table border="1"][table border="1"][tr][td]...). And, one table tag will have a del tag around it, while the other will have an ins tag around it, and that will obviously cause problems.
• If I change [html][body][b]some content here[/b][/body][/html] to [html][body][i]some other content here[/i][/body][/html] then it looks like [html][body][b][del]original[/del][i][ins]new[/ins] content here[/b][/i][/body][/html]

I'm looking for out-of-the-box ideas. Any ideas are welcome.

Answer 1

The relation between html code and rendered page is not sufficiently defined for this to work in the generic case. You need to be more specific for the problem to be solvable.

• css changes influence this
• do you want to handle invalid html
• it is easier to solve for a specific browser (version)

Answer 2

One of the setups you liked is a screenshot from a Wikipedia page. If that is the sort of diff'ing mechanism you are looking for, and it needs to be in PHP, then why not download MediaWiki and look at the portion of their code responsible for generating the diff?

It's probably the closest thing you are going to find to a generic, no-setup-needed, out-of-the box solution. (At least it's the closest thing I know of).

Answer 3

Here's a list of visual HTML diff products, discussed and compared.

Answer 4

Daisy Diff is a great diff program developed in java that does a very decent job at comparing HTML code.

It even has an option to go left and right to revise the changes that have been made. Daisy Diff is so powerful that it can handle attribute changes inside tags, it will tell you if an image has been changed, or if a link was removed or updated.

It is an open source project can be downloaded form google : http://code.google.com/p/daisydiff/

I know it is not php, but it may be your best chance at having a decent html diff. Use system or shell_exec php methods to execute a line like this:

java -jar daisydiff.jar http://myPageOld.html    html://myPageNew.html   
--file=result.html 
--output=html 
--type=html

the result of your diff will go to the file result.html I recommend you use it!