index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSON Diff Demo</title>
  <script src="./js/diff_match_patch_uncompressed.js"></script>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <h1>JSON Diff Demo</h1>
  <form action="#" onsubmit="event.preventDefault()">
    <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>
        <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>
        <label id="text2-error" for="text2" class="error"></label>
      </div>
    </div>
    <h3>Diff timeout:</h3>
    <div>
      <input type="text" size=3 maxlength=5 value="1" id="timeout"> seconds<br>
      <p>
        If the mapping phase of the diff computation takes longer than this, then the computation
        is truncated and the best solution to date is returned. While guaranteed to be correct,
        it may not be optimal. A timeout of '0' allows for unlimited computation.
      </p>
    </div>
    <H3>Post-diff cleanup:</H3>
    <dl>
      <dt>
        <input type="radio" name="cleanup" id="semantic" checked>
        <label for="semantic">Semantic Cleanup</label>
      </dt>
      <dd>
        Increase human readability by factoring out commonalities which are likely to be
        coincidental.
      </dd>
      <dt>
        <input type="radio" name="cleanup" id="efficiency">
        <label for="efficiency">Efficiency Cleanup</label>,
        edit cost: <input type="text" size=3 maxlength=5 value="4" id="edit-cost">
      <dd>
        Increase computational efficiency by factoring out short commonalities which are
        not worth the overhead. The larger the edit cost, the more aggressive the cleanup.
      </dd>
      <dt>
        <input type="radio" name="cleanup" id="raw">
        <label for="raw">No Cleanup</label>
      </dt>
      <dd>Raw output.</dd>
      <br>
      <div>
        <button type="submit" onClick="launch()">Compute Diff</button>
      </div>
  </form>
  <div class="flex-row">
    <div class="width-half">
      <h2>Diff Text Version 1:</h2>
      <pre id="result-before"></pre>
    </div>
    <div class="width-half">
      <h2>Diff Text Version 2:</h2>
      <pre id="result-after"></pre>
    </div>
  </div>
  <div id="time"></div>
  <script>
    const dmp = new diff_match_patch()

    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(JSON.stringify(object1, null, 2), JSON.stringify(object2, null, 2))
      const msEnd = (new Date()).getTime()

      if (document.getElementById('semantic').checked) {
        dmp.diff_cleanupSemantic(d)
      }
      if (document.getElementById('efficiency').checked) {
        dmp.diff_cleanupEfficiency(d)
      }
      const ds = dmp.diff_prettyJSON(d)
      document.getElementById('result-before').innerHTML = ds['diff_delete'].join('')
      document.getElementById('result-after').innerHTML = ds['diff_insert'].join('')

      document.getElementById('time').innerHTML = '<br>Time: ' + (msEnd - msStart) / 1000 + 's'
    }
  </script>
</body>

</html>