在网页中显示截断差异

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

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

我有什么： AngularJS代码使用jsdiff计算DIFF：

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行。我不想全部展示。但只是其中的一部分接近实际差异。虽然，为了提供上下文，我不想完全删除它，这很容易。

希望我的问题现在更清晰。

来源

2016-04-14 tkarls

在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

声明：我没有测试的这样的东西，我不知道这在所有工作。这只是我会走的第一条路。

来源

2016-04-14 10:43:51 Luke

是的，虽然我不想删除所有未更改的部分。我仍然想要一些线条来提供上下文。 – tkarls

好吧，你可以做到这一点。但具体的实施是你的一部分。我不会提供完整的解决方案，我刚才提到了如何省略不变的部分。顺便说一句，我希望它能帮助你！ – Luke

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

var processDiff = (diff) => { 
    diff.forEach(function(part){ 
     if(!part.added && !part.removed){ 
      var lines = part.value.split('\n'); 
      var addedDots = false; 
      part.newValue = ""; 
      for(var i = 0;i < lines.length;i++){ 
       if(i < 3 || i > lines.length-5){ 
        part.newValue += lines[i] + "\n"; 
       } 
       else if(!addedDots) { 
        part.newValue += "...\n" 
        addedDots = true; 
       } 
      } 
      part.newValue = part.newValue.slice(0, -1) 
     } 
     else { 
      part.newValue = part.value; 
     } 
    }); 
    return diff; 
}

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

虽然它给了我这样的看法：

来源

2016-04-14 12:37:23 tkarls

在网页中显示截断差异

回答

相关问题