You are hereHow to Compare and Display Differences Between Two Chunks of Text

How to Compare and Display Differences Between Two Chunks of Text

By steve - Posted on 30 June 2008

One of my clients needed to be able to see the differences between two versions of a database text field. The application was in a module of sugarcrm, but it isn't a sugarcrm problem per se. The database keeps an audit table showing all changes to "audit enabled" fields, so I already had the differences, I just needed to be able to show the user what they were.

Well, diff algorithms been around a long time, so I didn't think I'd need to write the code for doing this, but it did take a little searching to find something that would do the job. I couldn't find a function in php, but I did find diff.js, a javascript diff script that is part of wikipedia.org that I could use.

The script is very customizable and "understands" HTML. If you want to customize the format of the results, you only need to set the relevant default values for diff.js to use.

The results are great. For my situation, all I had to do was create a span with an id and 2 hidden form fields. Assign an ID and values to each one. Then, when an event occurs that tells me to display the differences (like a check box being clicked, or the page finishing being loaded), I call my function that calls the function in diff.js.

My steps were:

Include the diff.js script
Put an ID on all 3 text locations: the span with the text on the page and the 2 hidden fields
Insert a javascript function that can be called on an event that calls diff
Optionally include a function to reset the text back to the "un-diff-ed" format
Added my customizations for formatting (I included a strike-thru in the css for deletes and underline for additions)

That's it!

Here is an untested code snippet that will get you the idea. Note that the {} are used by XTEMPLATE to fill the values in my sugarcrm php code, so change your code or it will be using what you see here.

<html>
<body>
<script type='text/javascript' src=include/javascript/diff.js>
</script>
<table>
 <tr>
  <td valign="top" width=15% ><spansugar='slot13'>
   My note:</span sugar='slot'>
    <input type=hidden id=note_before value='{NOTE_BEFORE}'>
    <input type=hidden id=note_after  value='{NOTE_AFTER}'>
  <td colspan="2"><span id=note_current sugar='slot13b'
    style="font-size: 12pt">{NOTE}</span sugar='slot'>
  </td>
 </tr>
</table>

<input type=checkbox id=myck
  onClick="if(document.getElementById('myck').checked) {
              comparetext();
           } else {
              resettext();
           }
  ">

<script type='text/javascript'>
  function comparetext() {
   // compare text values for all notes and highlight differences
   document.getElementById("note_current").innerHTML =
     WDiffString(document.getElementById("note_before").value,
                 document.getElementById("note_after").value);
  }
  function resettext() {
    document.getElementById("note_current").innerHTML =
      document.getElementById("note_after").value;
  }
</script>

</body>
</html>

Thanks to wikipedia.org and cacycle for a great piece of javascript.

Add new comment

How to Compare and Display Differences Between Two Chunks of Text

Sponsors