html-differ


Сравнивает два HTML.

- Алгоритм сравнения
- Установка
- API
- HtmlDiffer
- Опции
- ignoreAttributes
- compareAttributesAsJSON
- ignoreWhitespaces
- ignoreComments
- ignoreEndTags
- ignoreSelfClosingSlash
- Пресеты
- Использование
- Методы
- htmlDiffer.diffHtml
- htmlDiffer.isEqual
- Logger
- Методы
- logger.getDiffText
- logger.logDiffText
- Пример
- Использование в качестве программы
- Пример
- Конфигурационный файл
- Маски
- Синтаксис
- Экранирование

Алгоритм сравнения

html-differ сравнивает HTML по следующим критериям:

* Декларации не чувствителны к регистру, поэтому следующие два HTML будут считаться эквивалентными:

``html

`

`html

`

* Пробельные символы (пробелы, табуляция, переводы строк и т. д.) внутри открывающих и закрывающих тэгов игнорируются при сравнении.

Например, следующие два HTML будут считаться эквивалентными:

`html

`

`html
"1" >
`

* Два соответствующих списка атрибутов считаются эквивалентными, даже если они записаны в разном порядке.

Например, следующие два HTML будут считаться эквивалентными:

`html
Text
`

`html
Text
`

* Два соответствующих атрибута class считаются эквивалентными, если они ссылаются на одни и те же группы CSS-стилей.

Например, следующие два HTML будут считаться эквивалентными:

`html
Text
`

`html
Text
`

ВНИМАНИЕ!

html-differ не проверяет валидность HTML, а сравнивает их по вышеуказанным критериям и заданным опциям (смотрите список возможных опций).

Установка

`bash
$ npm install html-differ
`

API

###HtmlDiffer###

`js
var HtmlDiffer = require('html-differ').HtmlDiffer,
htmlDiffer = new HtmlDiffer(options);
`

где options – это объект.

#### Опции


##### ignoreAttributes: [Array]

Устанавливает, значения каких атрибутов следует игнорировать при сравнении (по умолчанию: []).

Пример: ['id', 'for']

Следующие два HTML будут считаться эквивалентными:

`html
Text

`

`html
Text

`


##### compareAttributesAsJSON: [Array]

Устанавливает, значения каких атрибутов следует сравнивать как JSON-объекты, а не как строки (по умолчанию: []).

В тех случаях, когда в качестве значения атрибута выступает некорректный JSON или это значение нельзя обернуть в функцию, то оно будет сравниваться как undefined.

Пример: [{ name: 'data', isFunction: false }, { name: 'onclick', isFunction: true }]

Следующие два HTML будут считаться эквивалентными:

`html




`

`html




`

ПРИМЕЧАНИЕ!

Первый элемент массива мог быть записан в короткой форме в качестве строки:

['data', { name: 'onclick', isFunction: true }].


##### ignoreWhitespaces: Boolean

html-differ будет игнорировать пробельные символы (пробелы, табуляция, переводы строк и т. д.) при сравнении (по умолчанию: true).

Пример: true

Следующие два HTML будут считаться эквивалентными:

`html
Text TextText
`

`html

Text Text







Text




`


##### ignoreComments: Boolean

html-differ будет игнорировать HTML-комментарии при сравнении (по умолчанию: true).

ПРИМЕЧАНИЕ!

Условные комментарии не игнорируются.

Пример: true

Следующие два HTML будут считаться эквивалентными:

`html











Text


`

`html











Text


`


##### ignoreEndTags: Boolean

html-differ будет игнорировать закрывающие тэги при сравнении (по умолчанию: false).

Пример: true

Следующие два HTML будут считаться эквивалентными:

`html
Text
`

`html
Text
`


##### ignoreSelfClosingSlash: Boolean

html-differ игнорировать теги самозакрывающихся тегов во время сравнения (по умолчанию: false).

Пример: true

Следующие два HTML будут считаться эквивалентными:

`html

`

`html

`

#### Пресеты

* bem - уставливает предопределенные опции для БЭМ.


##### Использование

Передача пресета конструктору:

`js
var HtmlDiffer = require('html-differ').HtmlDiffer,
htmlDiffer = new HtmlDiffer('bem');
`

Переопределение пресета через конструктор:

`js
var HtmlDiffer = require('html-differ').HtmlDiffer,
htmlDiffer = new HtmlDiffer({ preset: 'bem', ignoreAttributes: [] });
`

#### Методы

##### htmlDiffer.diffHtml

@param {String} - 1-й HTML

@param {String} - 2-й HTML

@returns Promise<{Array of objects}> - массив с отличиями между HTML

##### htmlDiffer.isEqual

@param {String} - 1-й HTML

@param {String} - 2-й HTML

@returns Promise<{Boolean}>

$3

`js
var logger = require('html-differ/lib/logger');
`

#### Методы

##### logger.getDiffText

@param {Array of objects} - результат работы метода htmlDiffer.diffHtml

@param {Object} - опции:


* charsAroundDiff: Number - количество символов перед отличием между HTML и после него (по умолчанию: 40)

@returns {String}

##### logger.logDiffText

@param {Array of objects} - результат работы метода htmlDiffer.diffHtml

@param {Object} - опции:


* charsAroundDiff: Number - количество символов перед отличием между HTML и после него (по умолчанию: 40)

@returns - вывод отличий:

$3

`js
var fs = require('fs'),
HtmlDiffer = require('html-differ').HtmlDiffer,
logger = require('html-differ/lib/logger');

var html1 = fs.readFileSync('1.html', 'utf-8'),
html2 = fs.readFileSync('2.html', 'utf-8');

var options = {
ignoreAttributes: [],
compareAttributesAsJSON: [],
ignoreWhitespaces: true,
ignoreComments: true,
ignoreEndTags: false
};

var 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();
`

Использование в качестве программы

`bash
$ html-differ --help
Сравнивает два HTML

Использование:
html-differ [ОПЦИИ] [АРГУМЕНТЫ]

Опции:
-h, --help : Помощь
-v, --version : Показывает номер версии
--config=CONFIG : Путь к конфигурационному JSON-файлу
--bem : Использует предопределенные опции для БЭМ (устаревшая опция)
-p PRESET, --preset=PRESET : Имя пресета
--chars-around-diff=CHARSAROUNDDIFF : Количество символов перед отличием и после него (по умолчанию: 40)

Аргументы:
PATH1 : Путь к 1-ому HTML-файлу (обязательный аргумент)
PATH2 : Путь ко 2-ому HTML-файлу (обязательный аргумент)
`

$3

`bash
$ html-differ путь/к/html1 путь/к/html2

$ html-differ --config=путь/к/конфигу --chars-around-diff=40 путь/к/html1 путь/к/html2

$ html-differ --preset=bem путь/к/html1 путь/к/html2
`

$3

Рассмотрите следующий файл config.json:

`js
{
"ignoreAttributes": [],
"compareAttributesAsJSON": [],
"ignoreWhitespaces": true,
"ignoreComments": true,
"ignoreEndTags": false
}
`

Маски

html-differ поддерживает использование _масок_ в HTML.

Например, следующие два HTML будут считаться эквивалентными:

`html