File: testDiff.html

Recommend this page to a friend!
  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: 10 years ago
Size: 2,509 bytes


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>