I am using the diff-match-patch library in JavaScript to determine and visualize the differences between two configuration files for some components. It usually works well, however I’ve realized that for example in one line of a file there is the number “1657” and in the corresponding line in the other file there is the number “2160”. In this case, I want it to strikethrough the whole number “1657” and show “2160” as a completely new addition, however it instead only strikes through the “57” and shows the “2” and “0” in “2160” as new additions. This is how it looks in the diff-match-patch demo:
I understand this behavior is due to how the algorithm of diff-match-patch works, it only sees “2” and “0” as new additions because they didn’t exist in the previous string – but I am not sure how to fix it. I initially believed diff-match-patch doesn’t do a character-by-character comparison, but the demo page states that it actually does.
This is the current state of the function where I use diff-match-patch:
function generateDiff(text1, text2) {
let dmp = new diff_match_patch();
let diff = dmp.diff_main(text1, text2);
dmp.diff_cleanupSemantic(diff);
let display1 = '';
let display2 = '';
for (let i = 0; i < diff.length; i++) {
let part = diff[i];
let op = part[0]; // Operation (insert, delete, equal)
let data = part[1]; // Text of the change
let span1 = document.createElement('span');
let span2 = document.createElement('span');
if (op === 0) { // Equal
span1.className = 'diff-equal';
span2.className = 'diff-equal';
span1.textContent = data;
span2.textContent = data;
display1 += span1.outerHTML;
display2 += span2.outerHTML;
} else if (op === -1) { // Delete
span1.className = 'diff-delete';
span1.textContent = data;
display1 += span1.outerHTML;
} else { // Insert
span2.className = 'diff-insert';
span2.textContent = data;
display2 += span2.outerHTML;
}
}
return [display1, display2];
}
I have tried to handle only numbers differently by using some regex and identifying them in the text, but it didn’t work. I would appreciate any help on this, thank you!