User:Polygnotus/Scripts/DiffCompare.js: Difference between revisions

Revision as of 21:43, 8 September 2024

Latest revision as of 10:37, 13 June 2025

(11 intermediate revisions by the same user not shown)

Line 1:

// https://github.com/google/diff-match-patch

$.ajax('https://cdnjscdn.cloudflarejsdelivr.comnet/ajaxgh/libsgoogle/diff-match-patch@master/20121119javascript/diff_match_patch.min.js', {

dataType: 'script',

cache: true

}).then(function () {

const DEBUG = false;

function debug(...args) {

if (DEBUG) {

debug('[DiffCompare]', ...args);

}

}

debug('diff_match_patch library loaded successfully');

if (typeof diff_match_patch === 'undefined') {

console.error('diff_match_patch is undefined after loading');

return;

}

function showDiff(text1, text2) {

debug('showDiff called with:', { text1, text2 });

const dmp = new diff_match_patch();

debug('diff_match_patch instance created');

const diffs = dmp.diff_main(text1, text2);

debug('diffs created:', diffs);

dmp.diff_cleanupSemantic(diffs);

debug('diffs after cleanup:', diffs);

let html = '';

for (let i = 0; i < diffs.length; i++) {

constdebug(`Processing [opdiff ${i}:`, data] = diffs[i]);

const op = diffs[i][0];

const data = diffs[i][1];

switch (op) {

case DIFF_INSERT-1: // DIFF_DELETE

html += '<insdel style="background-color: #e6ffe6ffe6e6;">' + escapeHtml(data) + '</insdel>';

break;

case DIFF_DELETE1: // DIFF_INSERT

html += '<delins style="background-color: #ffe6e6e6ffe6;">' + escapeHtml(data) + '</delins>';

break;

case DIFF_EQUAL0: // DIFF_EQUAL

html += '<span>' + escapeHtml(data) + '</span>';

break;

default:

console.error(`Unknown diff operation: ${op}`);

}

}

debug('Final HTML:', html);

return html;

}

function escapeHtml(unsafe) {

return unsafe

.replace(/&/g, "&amp;")

.replace(/</g, "&lt;")

.replace(/>/g, "&gt;")

.replace(/"/g, "&quot;")

.replace(/'/g, "&#039;");

}

Line 31 ⟶ 69:

const newText = "The fast brown fox leaps over the lazy cat.";

try {

const diffHtml = showDiff(oldText, newText);

debug('Attempting to generate diff');

// You can use theconst diffHtml as= neededshowDiff(oldText, for example:newText);

debug('Diff generation successful');

// $('#diff-output').html(diffHtml);

console.log debug('Diff result:', diffHtml);

console.log('Diff result:', diffHtml);

const diffContainer = $('<div>')

.attr('id', 'diff-output')

.css({

'border': '1px solid #a2a9b1',

'padding': '10px',

'margin-bottom': '20px',

'background-color': '#f8f9fa'

})

.html('<strong>Diff Result:</strong><br>' + diffHtml);

$('#bodyContent').prepend(diffContainer);

} catch (error) {

console.error('Error generating diff:', error);

}

}).catch(function(error) {

console.error('Error loading diff_match_patch library:', error);

});