Compare two HTML sources and display visual differences [closed]

Answer 1

I assume you would like to diff the two HTML code files. In which case I would like to point you towards the following library:

http://code.google.com/p/java-diff-utils/

Answer 2

Use python's difflib. For example:

import difflib

file1 = open('file1.html', 'r').readlines()
file2 = open('file2.html', 'r').readlines()

htmlDiffer = difflib.HtmlDiff()
htmldiffs = htmlDiffer.make_file(file1, file2)

with open('comparison.html', 'w') as outfile:
    outfile.write(htmldiffs)

This will create an html file named comparison.html containing the diffs between the two html files file1.html and file2.html. Here file1.html is considered the source, or original version whichever is more appropriate for your case, and file2.html is the changed version or new version, again, whichever is more appropriate here.

Hope that helps!

Answer 3

You could embed each element from the diff list in a colored div so that it's easily visible

You stated that you have the list of diffs and the before/after HTML documents. If you can determine which HTML document each differenced element came from, then you could look them up by id in the DOM and embed them into a colored div to make it easily visible.

Answer 4

ok you have got the solution always , just except one tric. find first id or class in your patch text with a jscript function and focus over the element with jquery. something like below:

for all characters untill find 'id' var firstIdOfThePatchText = xxx; $('#firstIdOfThePatchText ').focus...

cheer

Answer 5

Have you tried BackstopJS ?

It's not documented but there is a misMatchThreshold parameter you can use to hide subtl differences: https://github.com/garris/BackstopJS/issues/52

Answer 6

Use daisyDiff api http://code.google.com/p/daisydiff/ You can call this api from a command prompt after your java code returns a difference.