有人知道这是什么js库做出来的效果吗？

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 4696 days ago, the information mentioned may be changed or developed.

截的知乎的图。

最新版的wordpress也支持这种前后版本对比的diff浏览图。

有人知道这是用什么js库做出来的效果吗？

12 replies • 1970-01-01 08:00:00 +08:00

manhere

Sep 24, 2013

php的倒是见过，js没见过

est

Sep 24, 2013

这个都需要js？直接输出<strike style="color: green">不就行了么？

hustlzp

Sep 24, 2013

@est 不是这个意思，就是比对前后2个版本的文本。

hustlzp

Sep 24, 2013

@est 相当于一个diff引擎+HTML输出

est

Sep 24, 2013

turing

Sep 24, 2013

@hustlzp 应该没那么复杂，不需要一个diff引擎那么复杂。lz可以看看codemirror的文档，cm就支持记录每一步的编辑修改，如果需要比对编辑前版本和编辑结束版本的差别，直接查询cm的记录就可以了，每一个编辑修改了什么，删除了什么，它都会记录下来。

hustlzp

Sep 24, 2013

@est
@turing 感谢二位，去研究下~

hustlzp

Sep 24, 2013

@est

再次感谢！
在github上也找到了一个js库 https://github.com/kpdecker/jsdiff
可以在 char/word/line 3个层次上进行diff

ijse

Sep 24, 2013

@hustlzp 请问， node.js有什么开源的diff引擎推荐吗？

RockHammer1947

Sep 24, 2013

@est strike标签已经不再使用，html5规范用 del 标签替代 http://www.w3school.com.cn/html5/tag_strike.asp

hustlzp

Sep 24, 2013

@ijse 上面说的jsdiff（ https://github.com/kpdecker/jsdiff ）就可以在node下用。

npm install diff

ijse

Sep 24, 2013

@hustlzp 谢谢，，不过有对比两个对象的吗？