Skip to content

Instantly share code, notes, and snippets.

@defrindr

defrindr/difftool.html

Created June 15, 2025 09:17
Show Gist options
  • Save defrindr/e9b2e724a54b6c6028bc27f385f121d3 to your computer and use it in GitHub Desktop.
Save defrindr/e9b2e724a54b6c6028bc27f385f121d3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. defrindr created this gist Jun 15, 2025.
    62 changes: 62 additions & 0 deletions difftool.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,62 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Simple Diff Tool</title>
    <style>
    body { font-family: sans-serif; margin: 20px; }
    textarea { width: 45%; height: 150px; }
    #result { margin-top: 20px; white-space: pre-wrap; font-family: monospace; }
    .added { background-color: #d4f8d4; } /* green */
    .removed { background-color: #f8d4d4; } /* red */
    </style>
    </head>
    <body>
    <h2>Simple Diff Tool</h2>
    <div>
    <textarea id="oldText" placeholder="Old text..."></textarea>
    <textarea id="newText" placeholder="New text..."></textarea>
    </div>
    <button onclick="compare()">Compare</button>
    <div id="result"></div>

    <script>
    function diffWords(oldStr, newStr) {
    const oldWords = oldStr.split(/\s+/);
    const newWords = newStr.split(/\s+/);
    const result = [];

    let i = 0, j = 0;

    while (i < oldWords.length || j < newWords.length) {
    if (oldWords[i] === newWords[j]) {
    result.push(oldWords[i]);
    i++; j++;
    } else {
    if (oldWords[i] && !newWords.includes(oldWords[i])) {
    result.push(`<span class="removed">${oldWords[i]}</span>`);
    i++;
    } else if (newWords[j] && !oldWords.includes(newWords[j])) {
    result.push(`<span class="added">${newWords[j]}</span>`);
    j++;
    } else {
    result.push(`<span class="removed">${oldWords[i]}</span>`);
    result.push(`<span class="added">${newWords[j]}</span>`);
    i++; j++;
    }
    }
    }

    return result.join(' ');
    }

    function compare() {
    const oldText = document.getElementById('oldText').value;
    const newText = document.getElementById('newText').value;
    const resultHtml = diffWords(oldText, newText);
    document.getElementById('result').innerHTML = resultHtml;
    }
    </script>
    </body>
    </html>