基于JavaScript的差异实用程序

70

我正在寻找用JavaScript编写的diff等效项，它仅返回/打印相关行。我不想两个文本都以高亮显示的差异彼此相邻显示，而只是想要实际的差异（加上一些缓冲行来知道差异在哪里），类似于linux diff实用程序的输出。

有人知道执行此操作的javascript函数吗？所有差异都应被识别（即使更改了空格）。谢谢。

javascript diff

— 戳
source

1

一切都很好，您对自己太难了。顺便说一句，一个很好的问题，如果没有它，我将不会被引导出这些答案（至少不是那么容易）。

— MrBoJangles 2011年

如果@austincheney在下面的比较中声称的差异快约4.5，并且是真实的，并且我没有理由认为不正确，则建议您考虑将他的回答标记为已接受。这以及突出显示每行中字符差异的更重要的（imo）特性！

— MrBoJangles

John Resig的jdiff是最简单，最有效的解决方案。需要一个javascript文件，并在javascript中执行以下一行代码

— Fuzzy Analysis

我可能做错了什么，但实际上我目前正在使用John Resig的东西，它的问题是它可以解码任何不同的东西。因此，例如，如果更改了标签，它看起来就被抬高了。

— MrBoJangles's

31

jsdifflib内联模式比较，请尝试调整上下文大小以仅显示所需的所需更改窗口。有一个演示在这里

— 斯科特·贝尔
source

上下文大小是我没看到的重要内容，谢谢:)

— 戳

3

jsdifflib很不错，但是它不会逐字显示diff。它只是显示不同的行。

— 最大

32

我完全重建了jsdifflib实用程序以提高速度。由于我的版本不需要DOM访问，因此至少要快4.5倍，并且还扩展了它以突出显示每行中的字符差异。

http://prettydiff.com/diffview.js

您可以使用在线工具直接在http://prettydiff.com/上进行测试

— 奥斯丁尼
source

可以将this或jsdifflib设置为不分解单个单词吗？

— 彼得·埃里希

@PeterEhrlich您应该加入Pretty Diff邮件列表，并提供示例用例，以便您的请求可以添加到项目中。

— austincheney 2012年

1

只是一个后续步骤：我已经将此婴儿（prettydiff）合并到我的li'l网络应用程序中，我喜欢它。我很喜欢。

— MrBoJangles 2013年

1

嘿，您能告诉我如何在js中使用prettydiff。我是否必须仅包含prettydiff.js？

— 达拉

3

好。这件事很糟糕-我不知道为什么投票这么多。我无法返回任何类型的对象。它坚持返回HTML，其中包括强制标语，该标语是为图书馆本身做广告的。

— 瑞安·希灵顿

28

还有谷歌的Diff-比赛补丁来自谷歌

也可在NPM上使用

npm install diff-match-patch

— 吉安·马可（Gian Marco）
source

1

这使其更易消耗，尤其是在具有webpack等的现代Web浏览器中：npmjs.com/package/diff-match-patch

— Ryan Shillington

在尝试了几个小时的差异库之后，这个绝对是比较纯文本的最佳选择。应该注意的是，它实际上不适用于XML / HTML。

— Ryan Shillington

6

Mergely完全值得一试。基于CodeMirror的（仅限客户端）。
然后是CodeMirror演示，它需要服务器端差异计算。
jsdifflib和prettydiff如其他答案中所述。

— 丹尼尔·F
source

1

CodeMirror不再需要任何服务器端差异计算

— Udo Klimaschewski

1

众所周知，他们还可以删除“此插件取决于google-diff-match-patch库来计算差异。”-注释仍在codemirror.net/demo/merge.html上

— Daniel F

2

它仍然需要外部JS“ cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/… ”，但是不再需要服务器端代码

— Udo Klimaschewski

4

签出我的最小实现：https : //github.com/Slava/diff.js

— 因斯拉夫科
source

一个很好的但非常慢的大型数据集

— Ulterior 2014年

4

我对linux或一般linux的diff实用程序了解不多，但这可能就是您正在寻找jsdifflib的东西。您可以在此处找到一个实时示例，然后查看它是否适合您。

— 真实阴影
source

3

签出CodeMirror。纳夫说。

— 提姆
source

6

“此插件取决于google-diff-match-patch库来计算差异。”

— 戳

该演示乍一看非常令人印象深刻。我可能不得不检查这个家伙。

— MrBoJangles

3

查看wikEd diff JavaScript库。还有一个在线工具。

wikEd diff具有内联文本比较功能，并带有块移动突出显示和基于字符/单词的分辨率。它针对Wikipedia源文本进行了优化，但适用于任何类型的文本或代码。库代码是完全可自定义的，具有Unicode支持，已被广泛注释，并且处于公共领域。

— 脚踏车
source

2

我知道一个老问题，但是如果您正在执行节点工作或想要与requirejs / commonjs模块兼容的东西

我真的很喜欢https://www.npmjs.com/package/diff

console.log(diff.createPatch('some file name.txt', expected, actual));

— 水质
source

对于将来的读者来说，当比较大量文本时，此差异库的性能很差。

— Trent Bing

的确如此，但是对于快照测试中的少量100k以及类似的大批量扩散通常是非常慢的，使用字节流编写的代码在逐渐加载大文件进行差异化之前就已经编写了代码，但这并不是现成的。通用差异库！:)

— aqm

1

jsdifflib看起来很有前途-请尝试从该页面链接的演示。

— 贾斯汀·埃斯蒂尔
source