Login   Register  
Icontem

File: testDiff.html

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Manuel Lemos  >  JS Diff Viewer  >  testDiff.html  >  Download  
File: testDiff.html
Role: Example script
Content type: text/plain
Description: Example page to show the difference between two texts
Class: JS Diff Viewer
Find and view the difference between text strings
Author: By
Last change: Escaped the patched text to show properly encoded in HTML pages.
Added support to patch the text before and obtain the text after using only
the list of differences.
Date: 2014-01-29 22:18
Size: 2,509 bytes
 

Contents

Class file image Download 
<!--
/*
 * testDiff.html
 *
 * @(#) $Id: testDiff.html,v 1.5 2014/01/30 06:17:53 mlemos Exp $
 *
 */
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<title>Test the Diff Object</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* { font-family: sans-serif,arial,helvetica }
.frameResults { border-style: solid; border-width: 1px; }
</style>
<script type="text/javascript" src="diff.js"></script>
</head>
<script type="text/javascript"><!--

/*
 * Create the diff object
 */
var diff = new ML.Text.Diff();

/*
 * Escape text to show as HTML.
 */
var htmlSpecialChars = function(text)
{
	return text
		.replace(/&/g, "&amp;")
		.replace(/</g, "&lt;")
		.replace(/>/g, "&gt;")
		.replace(/"/g, "&quot;")
		.replace(/'/g, "&#039;");
}

/*
 * Compute the difference between two strings
 */
function updateDifference()
{
	var theform, difference, before, after, afterPatch;

	theform = document.getElementById('theform');
	difference = {
		mode: theform['mode'].options[theform['mode'].selectedIndex].value,
		patch: true
	};
	before = document.getElementById('before').value;
	after = document.getElementById('after').value;
	afterPatch = {};
	if(diff.formatDiffAsHtml(before, after, difference)
	&& diff.patch(before, difference.difference, afterPatch))
	{
		document.getElementById('difference').innerHTML = difference.html;
		document.getElementById('patch').innerHTML = (after === afterPatch.after ? 'OK: The patched text matches the text after.' : 'There is a BUG: The patched text (<b>' + htmlSpecialChars(afterPatch.after) + '</b>) does not match the text after (<b>' + htmlSpecialChars(after) + '</b>).');
	}
}
// --></script>
<body onload="updateDifference()">
<form id="theform">
<div><label for="before">Before</label><br>
<textarea id="before" cols="80" rows="10" onchange="updateDifference();" onkeyup="updateDifference();">Some text before</textarea></div>
<div><label for="after">After</label><br>
<textarea id="after" cols="80" rows="10" onchange="updateDifference();" onkeyup="updateDifference();">This is the text after</textarea></div>
<div>Compare by <select name="mode" onchange="updateDifference();">
<option value="c">Character</option>
<option value="w" selected>Word</option>
<option value="l">Line</option>
</select></div>
<div>Difference</div>
<div id="difference" class="frameResults">&nbsp;</div>
<div>Patch</div>
<div id="patch" class="frameResults">&nbsp;</div>
</form>
</body>
</html>