From 73c44bf6f383d6a2b35b8d8a05aee812dc3902b1 Mon Sep 17 00:00:00 2001 From: Rodrigo Fernandes Date: Sat, 27 Sep 2014 14:49:32 +0100 Subject: [PATCH] improve block selection to diffs & fix white spaces on the highlighted parts --- diff2html.css | 2 - diff2html.js | 71 ++++++++++++++++----------- diff2html.min.css | 2 +- diff2html.min.js | 2 +- index.html | 6 +-- jsdiff.js | 120 +++++++++++++++++++++++++++++++++++----------- 6 files changed, 138 insertions(+), 65 deletions(-) diff --git a/diff2html.css b/diff2html.css index 8c7ba1b..f35e3df 100644 --- a/diff2html.css +++ b/diff2html.css @@ -110,7 +110,6 @@ margin-top: -1px; text-decoration: none; background-color: #ffb6ba; - font-weight: 700; border-radius: 0.2em; } @@ -120,7 +119,6 @@ margin-top: -1px; text-decoration: none; background-color: #97f295; - font-weight: 700; border-radius: 0.2em; } diff --git a/diff2html.js b/diff2html.js index 5983a76..71fc8c0 100644 --- a/diff2html.js +++ b/diff2html.js @@ -218,24 +218,29 @@ "\n"; for (var i = 0; i < block.lines.length; i++) { + var prevLine = block.lines[i - 1]; var line = block.lines[i]; var newLine = block.lines[i + 1]; + var nextNewLine = block.lines[i + 2]; - if (line.type == LINE_TYPE.DELETES && - newLine && newLine.type == LINE_TYPE.INSERTS) { - i++; + var isOppositeTypeTwoLineBlock = + line.type == LINE_TYPE.DELETES && + newLine && newLine.type == LINE_TYPE.INSERTS && + (!nextNewLine || nextNewLine && nextNewLine.type != LINE_TYPE.INSERTS) && + (!prevLine || prevLine && prevLine.type != LINE_TYPE.DELETES); + if (isOppositeTypeTwoLineBlock) { var escapedLine = escape(line.content); var nextEscapedLine = escape(newLine.content); - var diff = diffString(escapedLine, nextEscapedLine); + var diff = diffHighlight(escapedLine, nextEscapedLine); - lines = lines + - generateLineHtml(line.type, line.oldNumber, line.newNumber, removeIns(diff)) + - generateLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, removeDel(diff)); + lines += generateLineHtml(line.type, line.oldNumber, line.newNumber, diff.o) + + generateLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, diff.n); + + i++; } else { - lines = lines + - generateLineHtml(line.type, line.oldNumber, line.newNumber, line.content); + lines += generateLineHtml(line.type, line.oldNumber, line.newNumber, line.content); } } @@ -319,24 +324,25 @@ "\n"; for (var i = 0; i < block.lines.length; i++) { - - fileHtml.left += "\n"; - fileHtml.right += "\n"; - + var prevLine = block.lines[i - 1]; var line = block.lines[i]; var newLine = block.lines[i + 1]; + var nextNewLine = block.lines[i + 2]; - if (line.type == LINE_TYPE.DELETES && - newLine && newLine.type == LINE_TYPE.INSERTS) { - i++; + var isOpositeTypeTwoLineBlock = line.type == LINE_TYPE.DELETES && newLine && newLine.type == LINE_TYPE.INSERTS && + (!nextNewLine || nextNewLine && nextNewLine.type != LINE_TYPE.INSERTS) && + (!prevLine || prevLine && prevLine.type != LINE_TYPE.DELETES); + if (isOpositeTypeTwoLineBlock) { var escapedLine = escape(line.content); var nextEscapedLine = escape(newLine.content); - var diff = diffString(escapedLine, nextEscapedLine); + var diff = diffHighlight(escapedLine, nextEscapedLine); - fileHtml.left += generateSingleLineHtml(line.type, line.oldNumber, removeIns(diff)); - fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, removeDel(diff)); + fileHtml.left += generateSingleLineHtml(line.type, line.oldNumber, diff.o); + fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, diff.n); + + i++; } else if (line.type == LINE_TYPE.DELETES) { fileHtml.left += generateSingleLineHtml(line.type, line.oldNumber, line.content); fileHtml.right += generateSingleLineHtml(LINE_TYPE.CONTEXT, "", "", ""); @@ -347,9 +353,6 @@ fileHtml.left += generateSingleLineHtml(line.type, line.oldNumber, line.content); fileHtml.right += generateSingleLineHtml(line.type, line.newNumber, line.content); } - - fileHtml.left += "\n"; - fileHtml.right += "\n"; } }); @@ -358,10 +361,12 @@ }; var generateSingleLineHtml = function (type, number, content) { - return "" + number + "\n" + - " " + - "
" + content + "
" + - " \n"; + return"\n" + + " " + number + "\n" + + " " + + "
" + content + "
" + + " \n" + + " \n"; }; /* @@ -373,11 +378,11 @@ }; var removeIns = function (line) { - return line.replace(/((.*?)<\/ins>)/g, ""); + return line.replace(/(((.|\n)*?)<\/ins>)/g, ""); }; var removeDel = function (line) { - return line.replace(/((.*?)<\/del>)/g, ""); + return line.replace(/(((.|\n)*?)<\/del>)/g, ""); }; /* @@ -400,6 +405,16 @@ return value ? value : ""; } + function diffHighlight(diffLine1, diffLine2) { + /* remove the initial -/+ to avoid always having diff in the first char */ + var highlightedLine = diffString(diffLine1.substr(1), diffLine2.substr(1)); + + return { + o: diffLine1.charAt(0) + removeIns(highlightedLine), + n: diffLine2.charAt(0) + removeDel(highlightedLine) + } + } + /* singleton pattern */ var instance; return { diff --git a/diff2html.min.css b/diff2html.min.css index 03edb3a..b13efa6 100644 --- a/diff2html.min.css +++ b/diff2html.min.css @@ -1 +1 @@ -.d2h-wrapper{display:block;margin:0 auto;text-align:left;width:100%}.d2h-file-wrapper{border:1px solid #ddd;border-radius:3px;margin-bottom:1em}.d2h-file-header{padding:5px 10px;border-bottom:1px solid #d8d8d8;background-color:#f7f7f7;font:13px Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"}.d2h-file-stats{display:inline;font-size:12px;text-align:center;max-width:15%}.d2h-lines-added{background-color:#ceffce;border:1px solid #b4e2b4;color:#399839;border-radius:5px 0 0 5px;padding:2px;width:25px}.d2h-lines-deleted{background-color:#f7c8c8;border:1px solid #e9aeae;color:#c33;border-radius:0 5px 5px 0;padding:2px;width:25px}.d2h-file-name{display:inline;height:33px;line-height:33px;max-width:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.d2h-diff-table{border-collapse:collapse;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px;height:18px;line-height:18px;width:100%}.d2h-files-diff{width:100%}.d2h-file-diff{overflow-x:scroll}.d2h-file-side-diff{display:inline-block;overflow-x:scroll;width:50%;margin-right:-4px}.d2h-code-line{white-space:pre;padding-left:10px;padding-right:10px;height:18px;line-height:18px;margin-left:80px}.d2h-code-side-line{white-space:pre;padding-left:10px;padding-right:10px;height:18px;line-height:18px;margin-left:50px}.d2h-code-line del,.d2h-code-side-line del{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#ffb6ba;font-weight:700;border-radius:.2em}.d2h-code-line ins,.d2h-code-side-line ins{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#97f295;font-weight:700;border-radius:.2em}.line-num1{display:inline-block;float:left;width:30px;overflow:hidden;text-overflow:ellipsis}.line-num2{display:inline-block;float:right;width:30px;overflow:hidden;text-overflow:ellipsis}.d2h-code-linenumber{position:absolute;width:2%;min-width:65px;padding-left:10px;padding-right:10px;height:18px;line-height:18px;background-color:#fff;color:rgba(0,0,0,.3);text-align:right;border:solid #eee;border-width:0 1px;cursor:pointer}.d2h-code-side-linenumber{position:absolute;width:35px;padding-left:10px;padding-right:10px;height:18px;line-height:18px;background-color:#fff;color:rgba(0,0,0,.3);text-align:right;border:solid #eee;border-width:0 1px;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.d2h-del{background-color:#fee8e9;border-color:#e9aeae}.d2h-ins{background-color:#dfd;border-color:#b4e2b4}.d2h-info{background-color:#f8fafd;color:rgba(0,0,0,.3);border-color:#d5e4f2} \ No newline at end of file +.d2h-wrapper{display:block;margin:0 auto;text-align:left;width:100%}.d2h-file-wrapper{border:1px solid #ddd;border-radius:3px;margin-bottom:1em}.d2h-file-header{padding:5px 10px;border-bottom:1px solid #d8d8d8;background-color:#f7f7f7;font:13px Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"}.d2h-file-stats{display:inline;font-size:12px;text-align:center;max-width:15%}.d2h-lines-added{background-color:#ceffce;border:1px solid #b4e2b4;color:#399839;border-radius:5px 0 0 5px;padding:2px;width:25px}.d2h-lines-deleted{background-color:#f7c8c8;border:1px solid #e9aeae;color:#c33;border-radius:0 5px 5px 0;padding:2px;width:25px}.d2h-file-name{display:inline;height:33px;line-height:33px;max-width:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.d2h-diff-table{border-collapse:collapse;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px;height:18px;line-height:18px;width:100%}.d2h-files-diff{width:100%}.d2h-file-diff{overflow-x:scroll}.d2h-file-side-diff{display:inline-block;overflow-x:scroll;width:50%;margin-right:-4px}.d2h-code-line{white-space:pre;padding-left:10px;padding-right:10px;height:18px;line-height:18px;margin-left:80px}.d2h-code-side-line{white-space:pre;padding-left:10px;padding-right:10px;height:18px;line-height:18px;margin-left:50px}.d2h-code-line del,.d2h-code-side-line del{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#ffb6ba;border-radius:.2em}.d2h-code-line ins,.d2h-code-side-line ins{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#97f295;border-radius:.2em}.line-num1{display:inline-block;float:left;width:30px;overflow:hidden;text-overflow:ellipsis}.line-num2{display:inline-block;float:right;width:30px;overflow:hidden;text-overflow:ellipsis}.d2h-code-linenumber{position:absolute;width:2%;min-width:65px;padding-left:10px;padding-right:10px;height:18px;line-height:18px;background-color:#fff;color:rgba(0,0,0,0.3);text-align:right;border:solid #eee;border-width:0 1px;cursor:pointer}.d2h-code-side-linenumber{position:absolute;width:35px;padding-left:10px;padding-right:10px;height:18px;line-height:18px;background-color:#fff;color:rgba(0,0,0,0.3);text-align:right;border:solid #eee;border-width:0 1px;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.d2h-del{background-color:#fee8e9;border-color:#e9aeae}.d2h-ins{background-color:#dfd;border-color:#b4e2b4}.d2h-info{background-color:#f8fafd;color:rgba(0,0,0,0.3);border-color:#d5e4f2} \ No newline at end of file diff --git a/diff2html.min.js b/diff2html.min.js index 58e1f91..b875a47 100644 --- a/diff2html.min.js +++ b/diff2html.min.js @@ -1 +1 @@ -!function(window){var ClassVariable;return ClassVariable=function(){function Diff2Html(){}function escape(str){return str.slice(0).replace(/&/g,"&").replace(//g,">").replace(/\t/g," ")}function startsWith(str,start){return 0===str.indexOf(start)}function valueOrEmpty(value){return value?value:""}var LINE_TYPE={INSERTS:"d2h-ins",DELETES:"d2h-del",CONTEXT:"d2h-cntx",INFO:"d2h-info"};Diff2Html.prototype.getPrettyHtmlFromDiff=function(diffInput){var diffJson=generateDiffJson(diffInput);return generateJsonHtml(diffJson)},Diff2Html.prototype.getJsonFromDiff=function(diffInput){return generateDiffJson(diffInput)},Diff2Html.prototype.getPrettyHtmlFromJson=function(diffJson){return generateJsonHtml(diffJson)},Diff2Html.prototype.getPrettySideBySideHtmlFromDiff=function(diffInput){var diffJson=generateDiffJson(diffInput);return generateSideBySideJsonHtml(diffJson)},Diff2Html.prototype.getPrettySideBySideHtmlFromJson=function(diffJson){return generateSideBySideJsonHtml(diffJson)};var instance,generateDiffJson=function(diffInput){var files=[],currentFile=null,currentBlock=null,oldLine=null,newLine=null,saveBlock=function(){currentBlock&&(currentFile.blocks.push(currentBlock),currentBlock=null)},saveFile=function(){currentFile&&(files.push(currentFile),currentFile=null)},startFile=function(line){saveBlock(),saveFile(),currentFile={},currentFile.blocks=[],currentFile.deletedLines=0,currentFile.addedLines=0;var values=/^diff --git a\/(\S+) b\/(\S+).*$/.exec(line);currentFile.oldName=values[1],currentFile.newName=values[2]},startBlock=function(line){saveBlock();var values;(values=/^(@@ -(\d+),(\d+) \+(\d+),(\d+) @@).*/.exec(line))?(oldLine=values[2],newLine=values[4]):(oldLine=0,newLine=0),currentBlock={},currentBlock.lines=[],currentBlock.oldStartLine=oldLine,currentBlock.newStartLine=newLine,currentBlock.header=line},createLine=function(line){var currentLine={};currentLine.content=line,startsWith(line,"+")?(currentFile.addedLines++,currentLine.type=LINE_TYPE.INSERTS,currentLine.oldNumber=null,currentLine.newNumber=newLine++,currentBlock.lines.push(currentLine)):startsWith(line,"-")?(currentFile.deletedLines++,currentLine.type=LINE_TYPE.DELETES,currentLine.oldNumber=oldLine++,currentLine.newNumber=null,currentBlock.lines.push(currentLine)):(currentLine.type=LINE_TYPE.CONTEXT,currentLine.oldNumber=oldLine++,currentLine.newNumber=newLine++,currentBlock.lines.push(currentLine))},diffLines=diffInput.split("\n");return diffLines.forEach(function(line){!line||startsWith(line,"*")||startsWith(line,"new")||startsWith(line,"index")||startsWith(line,"---")||startsWith(line,"+++")||(startsWith(line,"diff")?startFile(line):currentFile&&startsWith(line,"@@")?startBlock(line):currentBlock&&createLine(line))}),saveBlock(),saveFile(),files},generateJsonHtml=function(diffFiles){return'
\n'+diffFiles.map(function(file){return'
\n
\n
\n +'+file.addedLines+'\n -'+file.deletedLines+'\n
\n
'+getDiffName(file.oldName,file.newName)+'
\n
\n
\n
\n \n \n '+generateFileHtml(file)+" \n
\n
\n
\n
\n"}).join("\n")+"
\n"},generateFileHtml=function(file){return file.blocks.map(function(block){for(var lines='\n \n
'+escape(block.header)+"
\n\n",i=0;i\n
'+valueOrEmpty(oldNumber)+'
'+valueOrEmpty(newNumber)+'
\n
'+content+"
\n\n"},generateSideBySideJsonHtml=function(diffFiles){return'
\n'+diffFiles.map(function(file){var diffs=generateSideBySideFileHtml(file);return'
\n
\n
\n +'+file.addedLines+'\n -'+file.deletedLines+'\n
\n
'+getDiffName(file.oldName,file.newName)+'
\n
\n
\n
\n
\n \n \n '+diffs.left+' \n
\n
\n
\n
\n
\n \n \n '+diffs.right+" \n
\n
\n
\n
\n
\n"}).join("\n")+"
\n"},generateSideBySideFileHtml=function(file){var fileHtml={};return fileHtml.left="",fileHtml.right="",file.blocks.forEach(function(block){fileHtml.left+='\n \n
'+escape(block.header)+"
\n\n",fileHtml.right+='\n \n
\n\n';for(var i=0;i\n",fileHtml.right+="\n";var line=block.lines[i],newLine=block.lines[i+1];if(line.type==LINE_TYPE.DELETES&&newLine&&newLine.type==LINE_TYPE.INSERTS){i++;var escapedLine=escape(line.content),nextEscapedLine=escape(newLine.content),diff=diffString(escapedLine,nextEscapedLine);fileHtml.left+=generateSingleLineHtml(line.type,line.oldNumber,removeIns(diff)),fileHtml.right+=generateSingleLineHtml(newLine.type,newLine.newNumber,removeDel(diff))}else line.type==LINE_TYPE.DELETES?(fileHtml.left+=generateSingleLineHtml(line.type,line.oldNumber,line.content),fileHtml.right+=generateSingleLineHtml(LINE_TYPE.CONTEXT,"","","")):line.type==LINE_TYPE.INSERTS?(fileHtml.left+=generateSingleLineHtml(LINE_TYPE.CONTEXT,"","",""),fileHtml.right+=generateSingleLineHtml(line.type,line.newNumber,line.content)):(fileHtml.left+=generateSingleLineHtml(line.type,line.oldNumber,line.content),fileHtml.right+=generateSingleLineHtml(line.type,line.newNumber,line.content));fileHtml.left+="\n",fileHtml.right+="\n"}}),fileHtml},generateSingleLineHtml=function(type,number,content){return''+number+'\n
'+content+"
\n"},getDiffName=function(oldFilename,newFilename){return oldFilename===newFilename?newFilename:oldFilename+" -> "+newFilename},removeIns=function(line){return line.replace(/((.*?)<\/ins>)/g,"")},removeDel=function(line){return line.replace(/((.*?)<\/del>)/g,"")};return{getInstance:function(){return void 0===instance&&(instance=new Diff2Html,instance.constructor=null),instance}}}(),window.Diff2Html=ClassVariable.getInstance(),window.Diff2Html}(window); \ No newline at end of file +!function(window){var ClassVariable;return ClassVariable=function(){function Diff2Html(){}function escape(str){return str.slice(0).replace(/&/g,"&").replace(//g,">").replace(/\t/g," ")}function startsWith(str,start){return 0===str.indexOf(start)}function valueOrEmpty(value){return value?value:""}function diffHighlight(diffLine1,diffLine2){var highlightedLine=diffString(diffLine1.substr(1),diffLine2.substr(1));return{o:diffLine1.charAt(0)+removeIns(highlightedLine),n:diffLine2.charAt(0)+removeDel(highlightedLine)}}var LINE_TYPE={INSERTS:"d2h-ins",DELETES:"d2h-del",CONTEXT:"d2h-cntx",INFO:"d2h-info"};Diff2Html.prototype.getPrettyHtmlFromDiff=function(diffInput){var diffJson=generateDiffJson(diffInput);return generateJsonHtml(diffJson)},Diff2Html.prototype.getJsonFromDiff=function(diffInput){return generateDiffJson(diffInput)},Diff2Html.prototype.getPrettyHtmlFromJson=function(diffJson){return generateJsonHtml(diffJson)},Diff2Html.prototype.getPrettySideBySideHtmlFromDiff=function(diffInput){var diffJson=generateDiffJson(diffInput);return generateSideBySideJsonHtml(diffJson)},Diff2Html.prototype.getPrettySideBySideHtmlFromJson=function(diffJson){return generateSideBySideJsonHtml(diffJson)};var instance,generateDiffJson=function(diffInput){var files=[],currentFile=null,currentBlock=null,oldLine=null,newLine=null,saveBlock=function(){currentBlock&&(currentFile.blocks.push(currentBlock),currentBlock=null)},saveFile=function(){currentFile&&(files.push(currentFile),currentFile=null)},startFile=function(line){saveBlock(),saveFile(),currentFile={},currentFile.blocks=[],currentFile.deletedLines=0,currentFile.addedLines=0;var values=/^diff --git a\/(\S+) b\/(\S+).*$/.exec(line);currentFile.oldName=values[1],currentFile.newName=values[2]},startBlock=function(line){saveBlock();var values;(values=/^(@@ -(\d+),(\d+) \+(\d+),(\d+) @@).*/.exec(line))?(oldLine=values[2],newLine=values[4]):(oldLine=0,newLine=0),currentBlock={},currentBlock.lines=[],currentBlock.oldStartLine=oldLine,currentBlock.newStartLine=newLine,currentBlock.header=line},createLine=function(line){var currentLine={};currentLine.content=line,startsWith(line,"+")?(currentFile.addedLines++,currentLine.type=LINE_TYPE.INSERTS,currentLine.oldNumber=null,currentLine.newNumber=newLine++,currentBlock.lines.push(currentLine)):startsWith(line,"-")?(currentFile.deletedLines++,currentLine.type=LINE_TYPE.DELETES,currentLine.oldNumber=oldLine++,currentLine.newNumber=null,currentBlock.lines.push(currentLine)):(currentLine.type=LINE_TYPE.CONTEXT,currentLine.oldNumber=oldLine++,currentLine.newNumber=newLine++,currentBlock.lines.push(currentLine))},diffLines=diffInput.split("\n");return diffLines.forEach(function(line){!line||startsWith(line,"*")||startsWith(line,"new")||startsWith(line,"index")||startsWith(line,"---")||startsWith(line,"+++")||(startsWith(line,"diff")?startFile(line):currentFile&&startsWith(line,"@@")?startBlock(line):currentBlock&&createLine(line))}),saveBlock(),saveFile(),files},generateJsonHtml=function(diffFiles){return'
\n'+diffFiles.map(function(file){return'
\n
\n
\n +'+file.addedLines+'\n -'+file.deletedLines+'\n
\n
'+getDiffName(file.oldName,file.newName)+'
\n
\n
\n
\n \n \n '+generateFileHtml(file)+" \n
\n
\n
\n
\n"}).join("\n")+"
\n"},generateFileHtml=function(file){return file.blocks.map(function(block){for(var lines='\n \n
'+escape(block.header)+"
\n\n",i=0;i\n
'+valueOrEmpty(oldNumber)+'
'+valueOrEmpty(newNumber)+'
\n
'+content+"
\n\n"},generateSideBySideJsonHtml=function(diffFiles){return'
\n'+diffFiles.map(function(file){var diffs=generateSideBySideFileHtml(file);return'
\n
\n
\n +'+file.addedLines+'\n -'+file.deletedLines+'\n
\n
'+getDiffName(file.oldName,file.newName)+'
\n
\n
\n
\n
\n \n \n '+diffs.left+' \n
\n
\n
\n
\n
\n \n \n '+diffs.right+" \n
\n
\n
\n
\n
\n"}).join("\n")+"
\n"},generateSideBySideFileHtml=function(file){var fileHtml={};return fileHtml.left="",fileHtml.right="",file.blocks.forEach(function(block){fileHtml.left+='\n \n
'+escape(block.header)+"
\n\n",fileHtml.right+='\n \n
\n\n';for(var i=0;i\n '+number+'\n
'+content+"
\n \n"},getDiffName=function(oldFilename,newFilename){return oldFilename===newFilename?newFilename:oldFilename+" -> "+newFilename},removeIns=function(line){return line.replace(/(((.|\n)*?)<\/ins>)/g,"")},removeDel=function(line){return line.replace(/(((.|\n)*?)<\/del>)/g,"")};return{getInstance:function(){return void 0===instance&&(instance=new Diff2Html,instance.constructor=null),instance}}}(),window.Diff2Html=ClassVariable.getInstance(),window.Diff2Html}(window); \ No newline at end of file diff --git a/index.html b/index.html index 4f9a382..5b88e58 100644 --- a/index.html +++ b/index.html @@ -176,10 +176,8 @@ document.onreadystatechange = function () { var diffJson = Diff2Html.getJsonFromDiff(lineDiffExample); - var lineByLineDiffHtml = Diff2Html.getPrettyHtmlFromJson(diffJson); - document.getElementById('line-by-line').innerHTML = lineByLineDiffHtml; - var sideBySideDiffHtml = Diff2Html.getPrettySideBySideHtmlFromJson(diffJson); - document.getElementById('side-by-side').innerHTML = sideBySideDiffHtml; + document.getElementById('line-by-line').innerHTML = Diff2Html.getPrettyHtmlFromJson(diffJson); + document.getElementById('side-by-side').innerHTML = Diff2Html.getPrettySideBySideHtmlFromJson(diffJson); } diff --git a/jsdiff.js b/jsdiff.js index 5c983eb..6362ed8 100644 --- a/jsdiff.js +++ b/jsdiff.js @@ -2,7 +2,6 @@ * Javascript Diff Algorithm * By John Resig (http://ejohn.org/) * Modified by Chu Alan "sprite" - * Modified by Rodrigo Fernandes (rtfpessoa) * * Released under the MIT license. * @@ -20,34 +19,47 @@ function escape(s) { return n; } -function diffString(o, n) { +function diffString( o, n ) { o = o.replace(/\s+$/, ''); n = n.replace(/\s+$/, ''); - var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/)); + var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/) ); var str = ""; + var oSpace = o.match(/\s+/g); + if (oSpace == null) { + oSpace = ["\n"]; + } else { + oSpace.push("\n"); + } + var nSpace = n.match(/\s+/g); + if (nSpace == null) { + nSpace = ["\n"]; + } else { + nSpace.push("\n"); + } + if (out.n.length == 0) { for (var i = 0; i < out.o.length; i++) { - str += '' + escape(out.o[i]) + ""; + str += '' + escape(out.o[i]) + oSpace[i] + ""; } } else { if (out.n[0].text == null) { for (n = 0; n < out.o.length && out.o[n].text == null; n++) { - str += '' + escape(out.o[n]) + ""; + str += '' + escape(out.o[n]) + oSpace[n] + ""; } } - for (var i = 0; i < out.n.length; i++) { + for ( var i = 0; i < out.n.length; i++ ) { if (out.n[i].text == null) { - str += '' + escape(out.n[i]) + ""; + str += '' + escape(out.n[i]) + nSpace[i] + ""; } else { var pre = ""; - for (n = out.n[i].row + 1; n < out.o.length && out.o[n].text == null; n++) { - pre += '' + escape(out.o[n]) + ""; + for (n = out.n[i].row + 1; n < out.o.length && out.o[n].text == null; n++ ) { + pre += '' + escape(out.o[n]) + oSpace[n] + ""; } - str += " " + out.n[i].text + pre; + str += " " + out.n[i].text + nSpace[i] + pre; } } } @@ -55,42 +67,92 @@ function diffString(o, n) { return str; } -function diff(o, n) { +function randomColor() { + return "rgb(" + (Math.random() * 100) + "%, " + + (Math.random() * 100) + "%, " + + (Math.random() * 100) + "%)"; +} +function diffString2( o, n ) { + o = o.replace(/\s+$/, ''); + n = n.replace(/\s+$/, ''); + + var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/) ); + + var oSpace = o.match(/\s+/g); + if (oSpace == null) { + oSpace = ["\n"]; + } else { + oSpace.push("\n"); + } + var nSpace = n.match(/\s+/g); + if (nSpace == null) { + nSpace = ["\n"]; + } else { + nSpace.push("\n"); + } + + var os = ""; + var colors = new Array(); + for (var i = 0; i < out.o.length; i++) { + colors[i] = randomColor(); + + if (out.o[i].text != null) { + os += '' + + escape(out.o[i].text) + oSpace[i] + ""; + } else { + os += "" + escape(out.o[i]) + oSpace[i] + ""; + } + } + + var ns = ""; + for (var i = 0; i < out.n.length; i++) { + if (out.n[i].text != null) { + ns += '' + + escape(out.n[i].text) + nSpace[i] + ""; + } else { + ns += "" + escape(out.n[i]) + nSpace[i] + ""; + } + } + + return { o : os , n : ns }; +} + +function diff( o, n ) { var ns = new Object(); var os = new Object(); - for (var i = 0; i < n.length; i++) { - if (ns[ n[i] ] == null) + for ( var i = 0; i < n.length; i++ ) { + if ( ns[ n[i] ] == null ) ns[ n[i] ] = { rows: new Array(), o: null }; - ns[ n[i] ].rows.push(i); + ns[ n[i] ].rows.push( i ); } - for (var i = 0; i < o.length; i++) { - if (os[ o[i] ] == null) + for ( var i = 0; i < o.length; i++ ) { + if ( os[ o[i] ] == null ) os[ o[i] ] = { rows: new Array(), n: null }; - os[ o[i] ].rows.push(i); + os[ o[i] ].rows.push( i ); } - for (var i in ns) { - if (ns[i].rows.length == 1 && typeof(os[i]) != "undefined" && os[i].rows.length == 1) { + for ( var i in ns ) { + if ( ns[i].rows.length == 1 && typeof(os[i]) != "undefined" && os[i].rows.length == 1 ) { n[ ns[i].rows[0] ] = { text: n[ ns[i].rows[0] ], row: os[i].rows[0] }; o[ os[i].rows[0] ] = { text: o[ os[i].rows[0] ], row: ns[i].rows[0] }; } } - for (var i = 0; i < n.length - 1; i++) { - if (n[i].text != null && n[i + 1].text == null && n[i].row + 1 < o.length && o[ n[i].row + 1 ].text == null && - n[i + 1] == o[ n[i].row + 1 ]) { - n[i + 1] = { text: n[i + 1], row: n[i].row + 1 }; - o[n[i].row + 1] = { text: o[n[i].row + 1], row: i + 1 }; + for ( var i = 0; i < n.length - 1; i++ ) { + if ( n[i].text != null && n[i+1].text == null && n[i].row + 1 < o.length && o[ n[i].row + 1 ].text == null && + n[i+1] == o[ n[i].row + 1 ] ) { + n[i+1] = { text: n[i+1], row: n[i].row + 1 }; + o[n[i].row+1] = { text: o[n[i].row+1], row: i + 1 }; } } - for (var i = n.length - 1; i > 0; i--) { - if (n[i].text != null && n[i - 1].text == null && n[i].row > 0 && o[ n[i].row - 1 ].text == null && - n[i - 1] == o[ n[i].row - 1 ]) { - n[i - 1] = { text: n[i - 1], row: n[i].row - 1 }; - o[n[i].row - 1] = { text: o[n[i].row - 1], row: i - 1 }; + for ( var i = n.length - 1; i > 0; i-- ) { + if ( n[i].text != null && n[i-1].text == null && n[i].row > 0 && o[ n[i].row - 1 ].text == null && + n[i-1] == o[ n[i].row - 1 ] ) { + n[i-1] = { text: n[i-1], row: n[i].row - 1 }; + o[n[i].row-1] = { text: o[n[i].row-1], row: i - 1 }; } }