JavaScript port of HtmlDiff.Net which is itself a C# port of HtmlDiff. Modified for reglugerd.is
The npm package @hugsmidjan/htmldiff-js serves a vital role for developers focused on maintaining the quality and consistency of HTML content across different versions of a webpage or document. This JavaScript module is a specialized fork designed to address the unique challenges posed by European special characters and pretty formatted numbers, ensuring that HTML differences are accurately captured and displayed. This tool is essential for developers who need to track changes in HTML documents efficiently, providing a clear, visual representation of text additions, deletions, and modifications.
For developers eager to incorporate this functionality into their projects, the command npm install @hugsmidjan/htmldiff-js makes the installation process straightforward. Once installed, @hugsmidjan/htmldiff-js simplifies the complex task of comparing HTML files, highlighting differences without the hassle of manual comparison. This can significantly speed up the review process in development environments where multiple iterations of HTML files are common, and accuracy in tracking changes is crucial.
The modifications in @hugsmidjan/htmldiff-js include not only enhanced support for European characters and formatted numbers but also several minor cleanups and bugfixes that improve the overall stability and reliability of the software. These improvements make @hugsmidjan/htmldiff-js an invaluable tool for developers working with multilingual websites or dealing with numerically intensive data presentations. By using this npm package, developers can ensure that their HTML content is meticulously maintained and consistently rendered, regardless of the language or formatting complexities involved.
JavaScript port of HtmlDiff.Net which is itself a C# port of HtmlDiff. Modified for reglugerd...
Read moreCore dependencies of this npm package and its dev dependencies.
@babel/core, @babel/preset-env, babel-jest, babel-loader, clean-webpack-plugin, core-js, jest, regenerator-runtime, unminified-webpack-plugin, webpack, webpack-cli
A README file for the @hugsmidjan/htmldiff-js code repository. View Code
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 <ins> and <del> elements. The classes of these elements are 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 <em> and <strong>), 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 <p> ends in the same string as the previous <p> tag did, two <ins> tags will be created: one starting at the beginning of the common string in the first <p> and one in the second <p> 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.
<html>
<body>
<div id="oldHtml">
<p>Some <em>old</em> html here</p>
</div>
<div id="newHtml">
<p>Some <b>new</b> html goes here</p>
</div>
<div id="diffHtml">
</div>
</body>
</html>
import HtmlDiff from 'htmldiff-js';
let oldHtml = document.getElementById('oldHtml');
let newHtml = document.getElementById('newHtml');
let diffHtml = document.getElementById('diffHtml');
diffHtml.innerHTML = HtmlDiff.execute(oldHtml.innerHTML, newHtml.innerHTML);
I didn't port the demo, but it should output markup the same way the htmldiff.net demo does with a slight exception in what appeared to me to be a bug, which I 'fixed'. I can no longer remember what that bug was, as I only ported this project quickly in order to use it in another project.