- Notifications
You must be signed in to change notification settings - Fork45
bem/html-differ
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Compares two HTML.
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">- Whitespaces (spaces, tabs, new lines etc.) inside start and end tags are ignored during the comparison.
For example, the following two code samples will be considered to be equivalent:
<spanid="1"></span>
<spanid= "1"></span>
- Two respective lists of attributes are considered to be equivalent even if they are specified in different order.
For example, the following two code samples will be considered to be equivalent:
<spanid="blah"class="ololo"tabIndex="1">Text</span>
<spantabIndex="1"id="blah"class="ololo">Text</span>
- Two respective attributes
classare 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:
<spanclass="ab bc cd">Text</span>
<spanclass=" 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 possibleoptions).
$ npm install html-differ
varHtmlDiffer=require('html-differ').HtmlDiffer,htmlDiffer=newHtmlDiffer(options);
whereoptions 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:
<labelfor="random">Text</label><inputid="random">
<labelfor="sfsdfksdf">Text</label><inputid="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 asundefined.
Example:[{ name: 'data', isFunction: false }, { name: 'onclick', isFunction: true }]
The following two code samples will be considered to be equivalent:
<divdata='{"bla":{"first":"ololo","second":"trololo"}}'></div><spanonclick='return {"aaa":"bbb","bbb":"aaa"}'></span><buttondata='REALLY BAD JSON'></button><buttononclick='REALLY BAD FUNCTION'></button>
<divdata='{"bla":{"second":"trololo","first":"ololo"}}'></div><spanonclick='return {"bbb":"aaa","aaa":"bbb"}'></span><buttondata='undefined'></button><buttononclick='undefined'></button>
REMARK!
The first element of the array could be written in a short form as string:['data', { name: 'onclick', isFunction: true }].
Makeshtml-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<headlang="en"><title></title></head><body>Text</body></html>
<html> Text Text<headlang="en"><title></title></head><body> Text</body></html>
Makeshtml-differ ignore HTML comments during the comparison (default:true).
REMARK!
Does not ignoreconditional comments.
Example:true
The following two code samples will be considered to be equivalent:
<!DOCTYPE html><!-- comments1 --><html><headlang="en"><metacharset="UTF-8"><!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> <![endif]--><!--[if !IE]><!--><linkhref="non-ie.css"rel="stylesheet"><!--<![endif]--></head><body>Text<!-- comments2 --></body></html>
<!DOCTYPE html><html><headlang="en"><metacharset="UTF-8"><!--[if IE]> <link href="all-ie-only.css" type="text/css" rel="stylesheet"/> <![endif]--><!--[if !IE]><!--><linkhref="non-ie.css"rel="stylesheet"><!--<![endif]--></head><body>Text</body></html>
Makeshtml-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>
Makeshtml-differ ignore tags' duplicate attributes during the comparison.
From the list of the same tag's attributes, the attribute which goes the first will be taken for comparison, others will be ignored (default:false).
Example:true
For example, the following two code samples will be considered to be equivalent:
<spanid="blah"id="ololo">Text</span>
<spanid="blah">Text</span>
Passing of a preset via the constructor:
varHtmlDiffer=require('html-differ').HtmlDiffer,htmlDiffer=newHtmlDiffer('bem');
Redefinition of a preset via the constructor:
varHtmlDiffer=require('html-differ').HtmlDiffer,htmlDiffer=newHtmlDiffer({preset:'bem',ignoreAttributes:[]});
@param{String} - the 1-st HTML code
@param{String} - the 2-nd HTML code
@returns{Array of objects} -array with diffs between HTML
@param{String} - the 1-st HTML code
@param{String} - the 2-nd HTML code
@returns{Boolean}
varlogger=require('html-differ/lib/logger');
@param{Array of objects} - the result of the work of the methodhtmlDiffer.diffHtml
@param{Object} - options:
- charsAroundDiff: Number - the number of characters around the diff result between two HTML (default:
40).
@returns{String}
@param{Array of objects} - the result of the work of the methodhtmlDiffer.diffHtml
@param{Object} - options:
- charsAroundDiff: Number - the number of characters around the diff result between two HTML (default:
40).
@returns - pretty logging of diffs:
varfs=require('fs'),HtmlDiffer=require('html-differ').HtmlDiffer,logger=require('html-differ/lib/logger');varhtml1=fs.readFileSync('1.html','utf-8'),html2=fs.readFileSync('2.html','utf-8');varoptions={ignoreAttributes:[],compareAttributesAsJSON:[],ignoreWhitespaces:true,ignoreComments:true,ignoreEndTags:false,ignoreDuplicateAttributes:false};varhtmlDiffer=newHtmlDiffer(options);vardiff=htmlDiffer.diffHtml(html1,html2),isEqual=htmlDiffer.isEqual(html1,html2),res=logger.getDiffText(diff,{charsAroundDiff:40});logger.logDiffText(diff,{charsAroundDiff:40});
$ html-differ --helpCompares two HTMLUsage: 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 optionsfor 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 fileconfig.json:
{"ignoreAttributes":[],"compareAttributesAsJSON":[],"ignoreWhitespaces":true,"ignoreComments":true,"ignoreEndTags":false,"ignoreDuplicateAttributes":false}
html-differ supports handling ofmasks in HTML.
For example, the following two code samples will be considered to be equivalent:
<divid="{{[a-z]*\s\d+}}">
<divid="text 12345">
Masks inhtml-differ have the following syntax:
{{RegExp}}
where:
{{– opening identifier of themask.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 themask.
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:
<divid="{{\d\.\d}}">
<divid="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:
<divclass="{{a\{\{b\}\}c}}">
<divclass="a{{b}}c">