Geek Answers Handbook

Are there javascript libs to create a good structured (tree) diff for HTML?

I am trying to find a solution for using the history viewer mechanism that we use on any site. For the user interface of this history view, I would like to show the user what changes have occurred between the two revisions of the object. In other words, diff.

This is a real problem because the objects in question are quite complex. I figured the best approach was to render each object as HTML, and then use some kind of diff tool for the generated HTML to represent the differences from the user.

The closest I came to a working solution with google-match-patch libraries ( http://code.google.com/p/google-diff-match-patch/ ). I used one of the suggested methods described in the wiki to use google-match-patch with structured content ( http://code.google.com/p/google-diff-match-patch/wiki/Plaintext ) That's right. For reference, here is my (somewhat rude - I just tested the concept) code: https://gist.github.com/921264

My question is: As explained on the aforementioned wiki page, "The correct solution is to use tree-like diff, match, and patch." Can anyone suggest such a library written in JavaScript?

I tried DaisyDiff (java) and was not impressed with the results.

EDIT : Here is a working jsfiddle for show-and-tell!

EDIT # 2: EXCHANGE REQUIRED : https://github.com/GenuineParts/TableDiff

+4
source share
1 answer

The problem with your solution is that it has a finite number of HTML tags in the document that it can support, because there are only so many Unicode characters. I used the same approach you posted, which was very useful, but instead of using Unicode characters, I use numbered place holders, for example:

{{0}}, {{1}}, {{2}} instead of Unicode characters. This gives a much larger amount of HTML that it can support.

+2
source

More articles:


All Articles