在网页中显示截断的差异

Question

我尝试使用jsdiff（https://github.com/kpdecker/jsdiff）在网页中显示两个文件的差异。

总的来说它工作得很好但是如果一个巨大的文件中只有一个小的变化，我不希望显示整个文件内容，而是我想要截断未修改的部分。就像在github上显示差异一样。

我拥有的： 使用jsdiff计算diff的AngularJS代码：

var serverValue = selectedServiceConfig.getServerConfigDataString();
$scope.diff = JsDiff.diffLines(serverValue, newValue);

然后HTML：

<pre id="diff">
  <span ng-repeat="change in diff" ng-class="{'diff-added': change.added, 'diff-removed': change.removed, 'diff-no-change': !change.added && !change.removed}">{{change.value}}</span>
</pre>

还有一些CSS：

#diff {
    .diff-no-change {
        opacity: 0.54;
    }
    .diff-added{
        color: green;
    }
    .diff-removed{
        color: red;
        text-decoration: line-through;
    }
}

这给了我一些例子：

现在，想象灰色部分是1000行。我不想展示这一切。但更确切地说，其中一些接近实际差异。虽然，为了提供上下文，我不想完全删除它，这很容易。

希望我的问题现在更清楚了。

Answer 1

在jsdiff的这个页面上，它描述了一个例子，你可以找到如何只显示更改的行。

https://github.com/kpdecker/jsdiff/blob/master/examples/web_example.html

在示例中有以下

var color = part.added ? 'green' :
    part.removed ? 'red' : 'grey';

和评论，'灰色'是常见的部分。

因此您可以重写示例，以排除常见部分

if (!part.added && !part.removed)
   return

免责声明：我没有对此进行任何测试，我不确定这是否有效。这只是我要去的第一种方式。

Answer 2

好吧，我通过删除不需要的文本并在diff对象中创建一个新值来解决它。

getString(R.string.app);

远非完美，因为我无法点击...进行扩展，整个解决方案感觉笨拙。

虽然它给了我这样的表情：