在網頁中顯示截斷差異

我試圖用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

在網頁中顯示截斷差異

回答

相關問題