Enhancement: Render tabs and spaces in pretty HTML previews. (#15)

Previously the `prettyHtml` functions made some changes to diff content
to better represent special characters, but not exhaustively. For
instance, it escapes `<` as `&lt;` so that the HTML preview interprets
the content as plaintext and not as HTML. Similarly, it replaces the
LINE FEED character with `&para;<br>` so that when interpreted by a
browser, the HTML will visually correspond to the newline (whereas HTML
parsers would normalize the whitespace and not show an actual newline).

This patch extends the existing transformation to represent horizontal
tabs with an `&emsp;` EM SPACE and a space character with `&nbsp;` to
further highlight changes to these whitespace characters, rather than
having them blend in via whitespace normalization.

Co-authored-by: Dennis Snell <[email protected]>

Author: LaurentAerens

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Next version
 
+ - Horizontal tab and space characters are rendered in `prettyHtml` via HTML
+   character references to visually show the changed characters.
+
 ## Java
 
  - `Diff_Timeout` is now compared using a monotonically increasing high-resolution

cpp/diff_match_patch.cpp

@@ -1276,7 +1276,8 @@ QString diff_match_patch::diff_prettyHtml(const QList<Diff> &diffs) {
   foreach(Diff aDiff, diffs) {
     text = aDiff.text;
     text.replace("&", "&amp;").replace("<", "&lt;")
-        .replace(">", "&gt;").replace("\n", "&para;<br>");
+        .replace(">", "&gt;").replace("\n", "&para;<br>")
+        .replace("\t", "&emsp;").replace(" ", "&nbsp;");
     switch (aDiff.operation) {
       case INSERT:
         html += QString("<ins style=\"background:#e6ffe6;\">") + text

csharp/DiffMatchPatch.cs

@@ -1338,7 +1338,7 @@ public string diff_prettyHtml(List<Diff> diffs) {
       StringBuilder html = new StringBuilder();
       foreach (Diff aDiff in diffs) {
         string text = aDiff.text.Replace("&", "&amp;").Replace("<", "&lt;")
-          .Replace(">", "&gt;").Replace("\n", "&para;<br>");
+          .Replace(">", "&gt;").Replace("\n", "&para;<br>").Replace("\t", "&emsp;").Replace(" ", "&nbsp;");
         switch (aDiff.operation) {
           case Operation.INSERT:
             html.Append("<ins style=\"background:#e6ffe6;\">").Append(text)

dart/DMPClass.dart

@@ -1256,7 +1256,9 @@ class DiffMatchPatch {
           .replaceAll('&', '&')
           .replaceAll('<', '&lt;')
           .replaceAll('>', '&gt;')
-          .replaceAll('\n', '&para;<br>');
+          .replaceAll('\n', '&para;<br>')
+          .replaceAll('\t', '&emsp;')
+          .replaceAll(' ', '&nbsp;');
       switch (aDiff.operation) {
         case Operation.insert:
           html.write('<ins style="background:#e6ffe6;">');

java/src/name/fraser/neil/plaintext/diff_match_patch.java

@@ -1382,7 +1382,8 @@ public String diff_prettyHtml(List<Diff> diffs) {
     StringBuilder html = new StringBuilder();
     for (Diff aDiff : diffs) {
       String text = aDiff.text.replace("&", "&amp;").replace("<", "&lt;")
-          .replace(">", "&gt;").replace("\n", "&para;<br>");
+          .replace(">", "&gt;").replace("\n", "&para;<br>")
+          .replace("\t", "&emsp;").replace(" ", "&nbsp;");
       switch (aDiff.operation) {
       case INSERT:
         html.append("<ins style=\"background:#e6ffe6;\">").append(text)

javascript/index.js

@@ -1430,11 +1430,18 @@ diff_match_patch.prototype.diff_prettyHtml = function(diffs) {
   var pattern_lt = /</g;
   var pattern_gt = />/g;
   var pattern_para = /\n/g;
+  var pattern_tab = /\t/g;
+  var pattern_space = / /g;
   for (var x = 0; x < diffs.length; x++) {
     var op = diffs[x][0];    // Operation (insert, delete, equal)
     var data = diffs[x][1];  // Text of change.
-    var text = data.replace(pattern_amp, '&amp;').replace(pattern_lt, '&lt;')
-        .replace(pattern_gt, '&gt;').replace(pattern_para, '&para;<br>');
+		var text = data
+      .replace(pattern_amp, '&amp;')
+      .replace(pattern_lt, '&lt;')
+      .replace(pattern_gt, '&gt;')
+      .replace(pattern_para, '&para;<br>')
+      .replace(pattern_tab, '&emsp;')
+      .replace(pattern_space, '&nbsp;');
     switch (op) {
       case DIFF_INSERT:
         html[x] = '<ins style="background:#e6ffe6;">' + text + '</ins>';

lua/diff_match_patch.lua

@@ -58,9 +58,10 @@ local function indexOf(a, b, start)
   return strfind(a, b, start, true)
 end
 
-local htmlEncode_pattern = '[&<>\n]'
+local htmlEncode_pattern = '[&<>\n\t ]'
 local htmlEncode_replace = {
-  ['&'] = '&amp;', ['<'] = '&lt;', ['>'] = '&gt;', ['\n'] = '&para;<br>'
+  ['&'] = '&amp;', ['<'] = '&lt;', ['>'] = '&gt;', ['\n'] = '&para;<br>',
+  ['\t'] = '&emsp;', [' '] = '&nbsp;'
 }
 
 -- Public API Functions

objectivec/DiffMatchPatch.m

@@ -1239,6 +1239,8 @@ - (NSString *)diff_prettyHtml:(NSMutableArray *)diffs;
     [text replaceOccurrencesOfString:@"<" withString:@"&lt;" options:NSLiteralSearch range:NSMakeRange(0, text.length)];
     [text replaceOccurrencesOfString:@">" withString:@"&gt;" options:NSLiteralSearch range:NSMakeRange(0, text.length)];
     [text replaceOccurrencesOfString:@"\n" withString:@"&para;<br>" options:NSLiteralSearch range:NSMakeRange(0, text.length)];
+    [text replaceOccurrencesOfString:@"\t" withString:@"&emsp;" options:NSLiteralSearch range:NSMakeRange(0, text.length)];
+    [text replaceOccurrencesOfString:@" " withString:@"&nbsp;" options:NSLiteralSearch range:NSMakeRange(0, text.length)];
 
     switch (aDiff.operation) {
       case DIFF_INSERT:

python2/diff_match_patch.py

@@ -1071,7 +1071,8 @@ def diff_prettyHtml(self, diffs):
     html = []
     for (op, data) in diffs:
       text = (data.replace("&", "&amp;").replace("<", "&lt;")
-                 .replace(">", "&gt;").replace("\n", "&para;<br>"))
+                  .replace(">", "&gt;").replace("\n", "&para;<br>")
+                  .replace("\t", "&emsp;").replace(" ", "&nbsp;"))
       if op == self.DIFF_INSERT:
         html.append("<ins style=\"background:#e6ffe6;\">%s</ins>" % text)
       elif op == self.DIFF_DELETE:

python3/diff_match_patch.py

@@ -1069,7 +1069,8 @@ def diff_prettyHtml(self, diffs):
     html = []
     for (op, data) in diffs:
       text = (data.replace("&", "&amp;").replace("<", "&lt;")
-                 .replace(">", "&gt;").replace("\n", "&para;<br>"))
+                  .replace(">", "&gt;").replace("\n", "&para;<br>")
+                  .replace("\t", "&emsp;").replace(" ", "&nbsp;"))
       if op == self.DIFF_INSERT:
         html.append("<ins style=\"background:#e6ffe6;\">%s</ins>" % text)
       elif op == self.DIFF_DELETE: