JavaScript port of HtmlDiff.Net which is itself a C# port of HtmlDiff
npm install @chrisdlim/htmldiff-jsTypescript port of htmldiff-js, which is the JavaScript port of HtmlDiff.NET which is itself a C# port of the Ruby implementation, HtmlDiff.
Diffs two HTML blocks, and returns a meshing of the two that includes and ins.diffins for new code, del.diffdel for removed code, and del.diffmod and ins.diffmod for sections of code that have been changed.
For "special tags" (primarily style tags such as and ), ins.mod elements are inserted with the new styles.
Further description can be found at this blog post written by Rohland, the author of HtmlDiff.NET.
Note: The diffing algorithm isn't perfect. One example is that if a new ends in the same string as the previous tag did, two tags will be created: one starting at the beginning of the common string in the first and one in the second containing all the content up to the point the trailing common string begins. It's a little frustrating, but I didn't write the algorithm (and honestly don't really understand it); I only ported it.
`` Some old html herehtml
Some new html goes here
#### JavaScript
javascript
import HtmlDiff from 'htmldiff-js';const oldHtml = document.getElementById('oldHtml');
const newHtml = document.getElementById('newHtml');
const diffHtml = document.getElementById('diffHtml');
diffHtml.innerHTML = HtmlDiff.execute(oldHtml.innerHTML, newHtml.innerHTML);
``