@markedjs/html-differ
Advanced tools
Compares two HTML strings.
html-differ compares HTML using the following criteria:
<!DOCTYPE> declarations are case-insensitive, so the following two code samples will be considered to be equivalent:<!DOCTYPE HTML PUBLIC "_PUBLIC" "_SYSTEM">
<!doctype html public "_PUBLIC" "_SYSTEM">
For example, the following two code samples will be considered to be equivalent:
<span id="1"></span>
<span id=
"1" ></span >
For example, the following two code samples will be considered to be equivalent:
<span id="blah" class="ololo" tabIndex="1">Text</span>
<span tabIndex="1" id="blah" class="ololo">Text</span>
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).
$ npm install @markedjs/html-differ
import { HtmlDiffer } from '@markedjs/html-differ';
const htmlDiffer = new HtmlDiffer(options);
where options is an object.
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:
<label for="random">Text</label>
<input id="random">
<label for="sfsdfksdf">Text</label>
<input id="sfsdfksdf">
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>
<div data='{"bla":{"second":"trololo","first":"ololo"}}'></div>
<span onclick='return {"bbb":"aaa","aaa":"bbb"}'></span>
<button data='undefined'></button>
<button onclick='undefined'></button>
REMARK!
The first element of the array could be written in a short form as string:
['data', { name: 'onclick', isFunction: true }].
Makes html-differ ignore whitespaces (spaces, tabs, new lines etc.) during the comparison (default: true).
Example: true
The following two code samples will be considered to be equivalent:
<html>Text Text<head lang="en"><title></title></head><body>Text</body></html>
<html>
Text Text
<head lang="en">
<title> </title>
</head>
<body>
Text
</body>
</html>
Makes html-differ ignore HTML comments during the comparison (default: true).
REMARK!
Does not ignore conditional comments.
Example: true
The following two code samples will be considered to be equivalent:
<!DOCTYPE html>
<!-- comments1 -->
<html>
<head lang="en">
<meta charset="UTF-8">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
<!--[if !IE]><!-->
<link href="non-ie.css" rel="stylesheet">
<!--<![endif]-->
</head>
<body>
Text<!-- comments2 -->
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--[if IE]>
<link href="all-ie-only.css" type="text/css" rel="stylesheet"/>
<![endif]-->
<!--[if !IE]><!-->
<link href="non-ie.css" rel="stylesheet">
<!--<![endif]-->
</head>
<body>
Text
</body>
</html>
Makes html-differ ignore end tags during the comparison (default: false).
Example: true
The following two code samples will be considered to be equivalent:
<span>Text</span>
<span>Text</spane>
Makes html-differ ignore tags' self closing slash during the comparison (default: false).
Example: true
For example, the following two code samples will be considered to be equivalent:
<img src="blah.jpg" />
<img src="blah.jpg">
Passing of a preset via the constructor:
import { HtmlDiffer } from '@markedjs/html-differ';
const htmlDiffer = new HtmlDiffer('bem');
Redefinition of a preset via the constructor:
import { HtmlDiffer } from '@markedjs/html-differ';
const htmlDiffer = new HtmlDiffer({ preset: 'bem', ignoreAttributes: [] });
@param {String} - the 1-st HTML code
@param {String} - the 2-nd HTML code
@returns Promise<{Array of objects}> - array with diffs between HTML
@param {String} - the 1-st HTML code
@param {String} - the 2-nd HTML code
@returns Promise<{Boolean}>
import * as logger from '@markedjs/html-differ/lib/logger';
@param {Array of objects} - the result of the work of the method htmlDiffer.diffHtml
@param {Object} - options:
40).@returns {String}
@param {Array of objects} - the result of the work of the method htmlDiffer.diffHtml
@param {Object} - options:
40).@returns - pretty logging of diffs:
import fs from 'fs';
import { HtmlDiffer } from '@markedjs/html-differ';
import * as logger from '@markedjs/html-differ/lib/logger';
const html1 = fs.readFileSync('1.html', 'utf-8');
const html2 = fs.readFileSync('2.html', 'utf-8');
const options = {
ignoreAttributes: [],
compareAttributesAsJSON: [],
ignoreWhitespaces: true,
ignoreComments: true,
ignoreEndTags: false
};
const htmlDiffer = new HtmlDiffer(options);
async function run() {
const diff = await htmlDiffer.diffHtml(html1, html2);
const isEqual = await htmlDiffer.isEqual(html1, html2);
const res = logger.getDiffText(diff, { charsAroundDiff: 40 });
logger.logDiffText(diff, { charsAroundDiff: 40 });
}
run();
$ 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)
$ html-differ path/to/html1 path/to/html2
$ html-differ --config=path/to/config --chars-around-diff=40 path/to/html1 path/to/html2
$ html-differ --preset=bem path/to/html1 path/to/html2
Study the following file config.json:
{
"ignoreAttributes": [],
"compareAttributesAsJSON": [],
"ignoreWhitespaces": true,
"ignoreComments": true,
"ignoreEndTags": false
}
html-differ supports handling of masks in HTML.
For example, the following two code samples will be considered to be equivalent:
<div id="{{[a-z]*\s\d+}}">
<div id="text 12345">
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.
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:
<div class="{{a\{\{b\}\}c}}">
<div class="a{{b}}c">
FAQs
Compares two HTML
The npm package @markedjs/html-differ receives a total of 19,546 weekly downloads. As such, @markedjs/html-differ popularity was classified as popular.
We found that @markedjs/html-differ demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Libxml2’s solo maintainer drops embargoed security fixes, highlighting the burden on unpaid volunteers who keep critical open source software secure.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.