Tutorial of How to View the JavaScript Diff of Two Strings to Patch the Text and a PHP Alternative - JS Diff Viewer package blog

Contents

Applications of Showing the Differences between Text Strings

Viewing the Differences between Strings in HTML Pages

Three Comparison Modes: By Character, Word or Line

Patching the Original Text to get the Final Text

Viewing the Differences and Patching Text in PHP

Conclusion

Applications of Showing the Differences between Text Strings

Some times it is necessary to determine what changed between two texts. That is the case for instance when you want to know what changed between two versions of the same source code file, or when you are collaborating with other people editing a text document.

I had this need when it was necessary to review the changes in the descriptions that authors did on their packages in JS Classes and PHP Classes. When the descriptions or the changes were long, it was hard to tell what changed looking at both.

This JavaScript Diff object was created precisely with the goal to highlight the text of the changes, by marking in distinct ways what text was added, changed or removed.

Viewing the Differences between Strings in HTML Pages

The basic usage of this object is very simple. You just pass to the diff function the text you had before, the text you have after the changes, and an object that passes some parameters and returns the differences.

 var difference = {
  mode: 'w'
 };
 var before = 'Some text before';
 var after = 'This is the text after';
 var diff = new ML.Text.Diff()
 if(!diff.diff(before, after, difference))
 {
   alert(diff.error);
 }
 else
 {
   alert('Changes: ' + difference.differences);
 }

If you want to actually see what changed between the two strings, you can use the function formatDiffAsHtml instead of the diff function. It returns an HTML string marking the added text in underline and bold style and the removed text in strike-through style. The styles are configurable.

You can insert the returned HTML in any section of your page when you want to display the text changes.

 if(diff.formatDiffAsHtml(before, after, difference))
 {
   document.getElementById( 'difference' ).innerHTML = difference.html;
 }

The formatted text differences may appear like this:

Some This is the text beforeafter

Three Comparison Modes: By Character, Word or Line

This object finds the differences between strings by splitting the texts in chunks and comparing them chunk by chunk. The strings can be split in three modes: by character, by word and by line.

The word and line modes are suitable for comparing regular text. The character mode is more suitable for finding differences between two binary data strings.

The mode is defined by setting the difference parameter passed to the diff or formatDiffAsHtml functions. The mode values should be 'c' for character, 'w' for word and 'l' for line.

Patching the Original Text to get the Final Text

This object generates an array of objects with the list of changes between the text before and after. That array is returned as the differences property of the difference parameter. That array can be used to patch the text before and rebuild the text after using the patch function.

The patch function only works if the diff function is called with the patch option set to true.

The patch function returns the patched string as the after property of the afterPatch parameter.

 var difference = {
  mode: 'w',
  patch: true
 };
 var afterPatch = {};
 if(diff.diff(before, after, difference)
 && diff.patch(before, difference.differences, afterPatch))
 {
   alert('The before text patched with the differences is: '
    + afterPatch.after);
 }

Viewing the Differences and Patching Text in PHP

I needed a solution that worked both on the browser with JavaScript so I could view the differences in realtime as I edited the changed string, and on the server side in PHP so it could display the changes in a HTML page without relying in JavaScript.

Therefore I developed a PHP class version of this JavaScript object with the exact same functionality of finding the differences between text strings, displaying the differences formatted as HTML and patching the original text to rebuild the final text using the list of differences.

There is also an article similar to this to explain how to show the differences between two strings and patch one to get the other also in PHP.

Conclusion

This JavaScript object and the PHP class are very useful for the described purposes. If you have other purposes that you would like to be addressed or have any other question, just put a comment here to this article.