javascript - 在网页中显示 chop 的差异

Question

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

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

我有: 使用 jsdiff 计算差异的 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';

还有一条评论，“灰色”代表公共(public)部分。

所以您可以重写示例，以排除公共(public)部分

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

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