javascript - 是否有任何 JavaScript 库可以为 HTML 创建一个很好的结构化(树)差异？

Question

我正在尝试提出一种解决方案来支持我们在整个站点中使用的“历史 View ”机制。对于这个历史 View 的用户界面，我想向用户展示一个对象的两次修订之间发生了什么变化。换句话说，差异。

这是一个真正的挑战，因为所涉及的对象都相当复杂。我认为最好的方法是将每个对象呈现为 HTML，然后在生成的 HTML 上使用某种差异工具向用户呈现差异。

到目前为止，我最接近可行的解决方案是使用 google-match-patch 库 ( 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

我的问题:如上述维基页面所述，“正确的解决方案是使用基于树的差异、匹配和补丁。”谁能推荐这样一个用 JavaScript 编写的库？

我尝试了 DaisyDiff (java)，但对结果并不满意。

---

编辑:Here is a working jsfiddle用于展示和讲述!

---

编辑#2:分享就是关怀:https://github.com/GenuineParts/TableDiff

Answer 1

您的解决方案的问题在于，它可以支持的文档中的 HTML 标记数量有限，因为只有这么多的 unicode 字符。我使用了与您发布的方法相同的方法，这非常有帮助，但我没有使用 unicode 字符，而是使用了编号占位符，例如:

{{0}}、{{1}}、{{2}} 而不是 unicode 字符。这提供了它可以支持的更大数量的 HTML。