是否有一个针对htmlstring的JS diff库就像纯文本上的google-diff-match-patch一样？

Question

目前我正在使用google-diff-match-patch来实现实时编辑工具，该工具可以在多个用户之间同步文本。当操作只是纯文本时，一切都很有效，每个用户的操作（添加/删除文本）可以通过与旧文本快照与google-diff帮助器进行比较来区分。但是当涉及到丰富的格式文本（如粗体/斜体）时，google-diff在比较htmlstring时效果不佳。 ＆lt;字符的出现＆lt;和＆gt;弄乱了差异结果，特别是当粗体/斜体格式相互嵌入时。

有人可以建议像google-diff这样的类似库来区分htmlstrings吗？或者任何建议都可以通过google-diff修复我的问题？我知道google-diff是专为纯文本而设计的，但实际上找不到比目前为止更好的库，所以如果谷歌差异的可行增强可以帮助它也有效。

Answer 1

google-diff-match-patch项目中的wiki分享了一些想法。从 http://code.google.com/p/google-diff-match-patch/wiki/Plaintext：

  

一种方法是使用简单的正则表达式或node-walker从HTML中剥离标记。然后根据文本内容区分HTML内容。不要执行任何差异清理。这个diff使人们能够将字符位置从一个版本映射到另一个版本（参见diff_xIndex函数）。在此之后，可以将所需的所有补丁应用于纯文本，然后将更改安全地映射回HTML。使用这种技术的方法是尽管可以自由编辑文本，但HTML标记是不可变的。

     

另一种方法是遍历HTML并用Unicode字符替换每个开始和结束标记。检查Unicode规范中是否有未使用的范围。在此过程中，为原始标记创建Unicode字符的哈希表。结果是一个文本块，可以修补，而不必担心在标记内插入文本或破坏标记的语法。在将内容重新转换回HTML以确保没有关闭标记丢失时，必须要小心。

我有一种预感，即第二个想法，即map-HTML-tags-to-Unicode-placeholder，可能比人们猜测的更好......尤其是如果你的HTML标签是来自某些缩小的集合，如果可以的话在显示交错（删除线/下划线）差异标记时执行一些开/关触摸。

另一种可能与简单样式一起使用的方法是删除HTML标记，但要记住受影响的字符索引。例如，“位置8-15是粗体”。然后，执行明文差异。最后，使用wiki第一种方法中的diff_xIndex位置映射思想，智能地重新插入HTML标签，以便将样式重新应用到幸存/添加的范围。 （也就是说，如果旧位置8-13幸存，但移动到20-25，那么在那里插入B标签。）

Answer 2

jsdifflib - 一个Javascript Visual Diff Tool＆amp;图书馆 https://github.com/cemerick/jsdifflib

这里有一个演示：http://cemerick.github.io/jsdifflib/demo.html

Answer 3

Pretty Diff可以满足您的所有需求，除非您需要更新DOM响应，以便在针对“onkeyup”事件时触发diff，而不是点击按钮。

http://prettydiff.com/

Answer 4

看看SynchroEdit，可能会有用。