javascript文本比较

库文件到附件中下载。

实例代码如下

<script type="text/javascript" src="/diffview.js"></script>
<link rel="stylesheet" type="text/css" href="/diffview.css"/>
<script type="text/javascript" src="/jsdiff.js"></script>
<script type="text/javascript" src="/difflib.js"></script>

 

<script>
window.onload = function(){
	var input = document.getElementById("input");
	var output = document.getElementById("output");
	var form = document.getElementById("form");

	input.value = "Two pieces to the puzzle\n\nDiff script by snowtide\nSnowtide script has no word diff\nCombine the two and it rocks!";
	output.value = "Two pieces to the puzzle\n\nDiff script by john resig\nResig script has no line by line diff\n\nCombine the two and it rocks!";

	form.onsubmit = function(e){
		if (e) e.preventDefault();
		if (typeof event != "undefined") event.returnValue = false;

		diffUsingJS ();
		return false;
	};
};

function diffUsingJS () {
	var base = difflib.stringAsLines(document.getElementById("input").value);
	var newtxt = difflib.stringAsLines(document.getElementById("output").value);
	var sm = new difflib.SequenceMatcher(base, newtxt);
	var opcodes = sm.get_opcodes();
	var diffoutputdiv = document.getElementById("diffoutput");
	while (diffoutputdiv.firstChild) diffoutputdiv.removeChild(diffoutputdiv.firstChild);
	var contextSize = 3;
	contextSize = contextSize ? contextSize : null;
	diffoutputdiv.appendChild(diffview.buildView({ baseTextLines:base,
												   newTextLines:newtxt,
												   opcodes:opcodes,
												   baseTextName:"Old",
												   newTextName:"New",
												   contextSize:contextSize,
												   viewType: 0}));
	
}
</script>
<div style="float:left;width:50%">
<form id="form"><b>Old:</b><br/>
<textarea cols="60" rows="10" id="input"></textarea><br/>

<div>
<b>New:</b><br/>
<textarea cols="60" rows="10" id="output"></textarea>
</div>
<input type="submit" value="Diff"/></form><br/>
</div>

<div id="diffoutput" style="clear:both;width:100%;"> </div>
<div style="clear:both;">&nbsp;</div>

 效果如下图