markedjs/html-differ is a JavaScript project with 35 stars. Сompares two HTML
Snapshot summary built from the project's own GitHub metadata — there's no written TopGit review yet. The page will update automatically when a full review is published.
WHY NO REVIEW YET
TopGit writes full reviews for the most-starred, most-requested repositories. This page is a snapshot until then — see the READ ME tab for the original README in full.
Two respective attributes class are considered to be equivalent if they refer to the same groups of CSS styles.
For example, the following two code samples will be considered to be equivalent:
<span class="ab bc cd">Text</span>
<span class=" cd ab bc bc">Text</span>
CAUTION! html-differ does not check the validity of HTML, but compares them using the above shown criteria and specified options (see the list of possible options).
Install
$ npm install @markedjs/html-differ
API
HtmlDiffer
import { HtmlDiffer } from '@markedjs/html-differ';
const htmlDiffer = new HtmlDiffer(options);
where options is an object.
Options
ignoreAttributes: [Array]
Sets what kind of respective attributes' content will be ignored during the comparison (default: []).
Example: ['id', 'for']
The following two code samples will be considered to be equivalent:
Sets what kind of respective attributes' content will be compared as JSON objects, but not as strings (default: []).
In cases when the value of the attribute is an invalid JSON or can not be wrapped into a function, it will be compared as undefined.
Example: [{ name: 'data', isFunction: false }, { name: 'onclick', isFunction: true }]
The following two code samples will be considered to be equivalent:
<div data='{"bla":{"first":"ololo","second":"trololo"}}'></div>
<span onclick='return {"aaa":"bbb","bbb":"aaa"}'></span>
<button data='REALLY BAD JSON'></button>
<button onclick='REALLY BAD FUNCTION'></button>
$ html-differ --help
Compares two HTML
Usage:
html-differ [OPTIONS] [ARGS]
Options:
-h, --help : Help
-v, --version : Shows the version number
--config=CONFIG : Path to a configuration JSON file
--bem : Uses predefined options for BEM (deprecated)
-p PRESET, --preset=PRESET : Name of a preset
--chars-around-diff=CHARSAROUNDDIFF : The number of characters around the diff (default: 40)
Arguments:
PATH1 : Path to the 1-st HTML file (required)
PATH2 : Path to the 2-nd HTML file (required)
For example, the following two code samples will be considered to be equivalent:
<div id="{{[a-z]*\s\d+}}">
<div id="text 12345">
Syntax
Masks in html-differ have the following syntax:
{{RegExp}}
where:
{{ – opening identifier of the mask.
RegExp – regular expression for matching with the corresponding value in another HTML. The syntax is similar to regular expressions in JavaScript written in a literal notation.
}} – closing identifier of the mask.
Screening
The rules of screening of symbols are similar to the rules which are used in regular expressions in JavaScript written in a literal notation.
For example, the following two code samples will be considered to be equivalent:
<div id="{{\d\.\d}}">
<div id="1.1">
If you want to use {{ or }} inside a mask, you should screen both curly braces, i.e. \{\} or \}\}.
For example, the following two code samples will be considered to be equivalent:
markedjs/html-differ has 35 GitHub stars — refresh the page for the live number, or check github.com/markedjs/html-differ. TopGit mirrors GitHub's count but does not claim minute-by-minute accuracy.
Is markedjs/html-differ open source?
Yes — markedjs/html-differ ships under the MIT license, which makes its source code freely readable (and, depending on license terms, forkable and reusable). Source: github.com/markedjs/html-differ.
What is markedjs/html-differ?
markedjs/html-differ (markedjs/html-differ) is a JavaScript project on GitHub. From the project's own README: Сompares two HTML
Where can I see markedjs/html-differ in action?
The project maintains a homepage at https://www.npmjs.com/package/@markedjs/html-differ. The README tab on this page also usually contains screenshots and a quickstart.
Where do I read more about markedjs/html-differ?
This TopGit page is a snapshot — the READ ME tab shows the project's own README content (links stripped, images preserved). The GitHub repository at github.com/markedjs/html-differ is the definitive source.
Read full README in the tab above.
Is html-differ worth your time?
ChatGPT, Claude and Perplexity can all read this page. Ask one of them what it makes of html-differ.
/html-differ
