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

Question

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

任何人都可以建议像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-placeholders,可能比人们猜测的更好...尤其是如果你的HTML标签是来自某些简化的集合,并且你可以执行一些显示交错(删除线/下划线)差异标记时打开/关闭触摸.

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

Answer 2

jsdifflib - 一个Javascript Visual Diff工具和库 https://github.com/cemerick/jsdifflib

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

Answer 3

看看SynchroEdit，可能会有用。