Webページに切り捨て差分を表示

Question

jsdiff（https://github.com/kpdecker/jsdiff）を使用して2つのファイルの差分をWebページに表示しようとしています。

全体的にはうまくいきますが、巨大なファイルにわずかな変更があっても、ファイルの内容全体が表示されないようにするには、変更されていない部分を切り捨てたいと思います。 diffによく似たものがgithubに表示されます。これは私を与える

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

：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私は何を持っている

たとえば、

ここで、灰色の部分が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オブジェクトに新しい値を作成して解決しました。

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; 
} 

私はクリックすることはできません...展開するとソリューション全体が不器用に感じるから遠いです。それは私にこの外観を与えるが

：