是否有任何JavaScript库为HTML创建一个很好的结构化（树）比较？ [英] Are there any javascript libs for creating a nice structured (tree) diff for HTML?
问题描述
我试图想出一个解决方案来推动我们在整个网站中使用的历史视图机制。对于这个历史视图的用户界面，我想向用户展示两个对象修订之间发生的变化。换句话说，差异。
这是一个真正的挑战，因为所讨论的对象都相当复杂。我认为最好的方法是将每个对象呈现为HTML，然后在生成的HTML上使用某种差异工具向用户展示差异。
最接近的I Google的匹配补丁程序库（ http://code.google.com/p/google-diff-match-patch/ ）。我实施了wiki中描述的一种建议方法，以使用带结构化内容的google-match-patch（ http://code.google.com/p/google-diff-match-patch/wiki/Plaintext ）但结果不太正确。作为参考，这里是我的（有点粗俗 - 我只是测试这个概念）代码： https：//gist.github。 com / 921264
我的问题：正如上面的wiki页面所解释的，正确的解决方案是使用树基于差异，匹配和补丁。任何人都可以提出这样一个用JavaScript编写的库？
我尝试了DaisyDiff（java），并且对结果不感冒。
编辑：这是一个工作jsfiddle 的显示和告诉！
编辑＃2：共享关怀： https://github.com/GenuineParts/TableDiff
解决方案的问题在于，它可以支持的文档中包含有限数量的HTML标记，因为只有很多unicode字符。我使用了与您发布的相同方法，这非常有帮助，但不是使用Unicode字符，而是使用编号的占位符，例如： }，{{1}}，{{2}}而不是unicode字符。这给了它可以支持的更大量的HTML。
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
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.
这篇关于是否有任何JavaScript库为HTML创建一个很好的结构化（树）比较？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
