Are there any javascript libs for creating a nice structured (tree) diff for HTML?

Question

I'm trying to come up with a solution to power a "history view" mechanism that we are using throughout a site. For the UI of this history view I'd like to show the user what changes occurred between two revisions of an object. In other words, a diff.

This is a real challenge because the objects in question are all fairly complex. I figured the best approach was to render each object as HTML and then use some kind of diff tool on the generated HTML to present the differences to the user.

The closest I've come so far to a working solution is with the google-match-patch libraries (http://code.google.com/p/google-diff-match-patch/). I implemented one of the suggested methods described in the wiki for using google-match-patch with structured content (http://code.google.com/p/google-diff-match-patch/wiki/Plaintext) but the results aren't quite right. For reference, here is my (somewhat crude - I was just testing the concept) code: https://gist.github.com/921264

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

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

---

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

---

EDIT #2: SHARING IS CARING: https://github.com/GenuineParts/TableDiff

Answer 1

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

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