feat: format json result and show json error

Author: regchiu

css/style.css

@@ -10,3 +10,8 @@
 .width-full {
   width: 100%;
 }
+
+.error {
+  color: #d12f19;
+  background:#ffe6e6;
+}

index.html

@@ -15,11 +15,15 @@ <h1>JSON Diff Demo</h1>
     <div class="flex-row">
       <div class="width-half">
         <h2>Text Version 1:</h2>
-        <textarea id="text1" class="width-full" rows="10">{"Aidan Gillen": {"array": ["Game of Thron\"es","The Wire"],"string": "some string","int": 2,"aboolean": true, "boolean": true,"object": {"foo": "bar","object1": {"new prop1": "new prop value"},"object2": {"new prop1": "new prop value"},"object3": {"new prop1": "new prop value"},"object4": {"new prop1": "new prop value"}}},"Amy Ryan": {"one": "In Treatment","two": "The Wire"},"Annie Fitzgerald": ["Big Love","True Blood"],"Anwan Glover": ["Treme","The Wire"],"Alexander Skarsgard": ["Generation Kill","True Blood"], "Clarke Peters": null}</textarea>
+        <textarea id="text1" class="width-full"
+          rows="10">{"Aidan Gillen": {"array": ["Game of Thron\"es","The Wire"],"string": "some string","int": 2,"aboolean": true, "boolean": true,"object": {"foo": "bar","object1": {"new prop1": "new prop value"},"object2": {"new prop1": "new prop value"},"object3": {"new prop1": "new prop value"},"object4": {"new prop1": "new prop value"}}},"Amy Ryan": {"one": "In Treatment","two": "The Wire"},"Annie Fitzgerald": ["Big Love","True Blood"],"Anwan Glover": ["Treme","The Wire"],"Alexander Skarsgard": ["Generation Kill","True Blood"], "Clarke Peters": null}</textarea>
+        <label id="text1-error" for="text1" class="error"></label>
       </div>
       <div class="width-half">
         <h2>Text Version 2:</h2>
-        <textarea id="text2" class="width-full" rows="10">{"Aidan Gillen": {"array": ["Game of Thrones","The Wire"],"string": "some string","int": "2","otherint": 4, "aboolean": "true", "boolean": false,"object": {"foo": "bar"}},"Amy Ryan": ["In Treatment","The Wire"],"Annie Fitzgerald": ["True Blood","Big Love","The Sopranos","Oz"],"Anwan Glover": ["Treme","The Wire"],"Alexander Skarsg?rd": ["Generation Kill","True Blood"],"Alice Farmer": ["The Corner","Oz","The Wire"]}</textarea>
+        <textarea id="text2" class="width-full"
+          rows="10">{"Aidan Gillen": {"array": ["Game of Thrones","The Wire"],"string": "some string","int": "2","otherint": 4, "aboolean": "true", "boolean": false,"object": {"foo": "bar"}},"Amy Ryan": ["In Treatment","The Wire"],"Annie Fitzgerald": ["True Blood","Big Love","The Sopranos","Oz"],"Anwan Glover": ["Treme","The Wire"],"Alexander Skarsg?rd": ["Generation Kill","True Blood"],"Alice Farmer": ["The Corner","Oz","The Wire"]}</textarea>
+        <label id="text2-error" for="text2" class="error"></label>
       </div>
     </div>
     <h3>Diff timeout:</h3>
@@ -70,11 +74,25 @@ <H3>Post-diff cleanup:</H3>
     function launch() {
       const text1 = document.getElementById('text1').value
       const text2 = document.getElementById('text2').value
+      let object1 = null
+      let object2 = null
+      try {
+        object1 = JSON.parse(text1)
+      } catch (error) {
+        document.getElementById('text1-error').innerText = 'Parse Text Version 1 error: ' + error
+        throw ('Parse Text Version 1 error: ' + error)
+      }
+      try {
+        object2 = JSON.parse(text2)
+      } catch (error) {
+        document.getElementById('text2-error').innerText = 'Parse Text Version 2 error: ' + error
+        throw ('Parse Text Version 2 error: ' + error)
+      }
       dmp.Diff_Timeout = parseFloat(document.getElementById('timeout').value)
       dmp.Diff_EditCost = parseFloat(document.getElementById('edit-cost').value)
 
       const msStart = (new Date()).getTime()
-      const d = dmp.diff_main(text1, text2)
+      const d = dmp.diff_main(JSON.stringify(object1, null, 2), JSON.stringify(object2, null, 2))
       const msEnd = (new Date()).getTime()
 
       if (document.getElementById('semantic').checked) {

js/diff_match_patch_uncompressed.js

@@ -1284,35 +1284,19 @@ diff_match_patch.prototype.diff_prettyJSON = function(diffs) {
     diff_insert: [],
     diff_delete: []
   };
-  var pattern_amp = /&/g;
-  var pattern_lt = /</g;
-  var pattern_gt = />/g;
-  var pattern_para = /\n/g;
-  var pattern_opening_brace = /{/g;
-  var pattern_closing_brace = /}/g;
-  var pattern_comma = /,/g;
-  var pattern_opening_bracket = /\[/g;
-  var pattern_closing_bracket = /\]/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>')
-        .replace(pattern_opening_brace, '&#123;<br>')
-        .replace(pattern_closing_brace, '<br>&#125;')
-        .replace(pattern_opening_bracket, '&#91;<br>')
-        .replace(pattern_closing_bracket, '<br>&#93;')
-        .replace(pattern_comma, '&#44;<br>');
     switch (op) {
       case DIFF_INSERT:
-        html['diff_insert'][x] = '<ins style="background:#e6ffe6;">' + text + '</ins>';
+        html['diff_insert'][x] = '<ins style="background:#e6ffe6;">' + data + '</ins>';
         break;
       case DIFF_DELETE:
-        html['diff_delete'][x] = '<del style="background:#ffe6e6;">' + text + '</del>';
+        html['diff_delete'][x] = '<del style="background:#ffe6e6;">' + data + '</del>';
         break;
       case DIFF_EQUAL:
-        html['diff_insert'][x] = '<span>' + text + '</span>';
-        html['diff_delete'][x] = '<span>' + text + '</span>';
+        html['diff_insert'][x] = '<span>' + data + '</span>';
+        html['diff_delete'][x] = '<span>' + data + '</span>';
         break;
     }
   }