Как различать HTML (сравнивать и выделять различия) и генерировать вывод в HTML с помощью JavaScript

Содержание

1 1. Получить копию htmldiff.js
2 2. Использование скрипта

Ваш пользователь хочет знать разницу с тем, что он написал в прошлом, хочет, чтобы это было выделено в браузере, но что он написал в формате HTML? Даже не думайте перебирать каждый элемент DOM, извлекать текст и сравнивать его с другим узлом, так как это может работать не так, как ожидалось, и для его реализации потребуется много времени. Если вы думаете о быстром решении, и вам разрешено использовать сторонние сценарии, вы можете использовать сценарий htmldiff. Наиболее полезный случай, когда вы можете использовать это, когда вы хотите реализовать представление diff для пользователя, но контент находится в формате HTML, например, когда контент был сохранен с помощью редактора WYSIWYG.

В этой статье мы покажем вам, как легко внедрить htmldiff в ваш веб-проект.

1. Получить копию htmldiff.js

Htmldiff.js — это потрясающий diff-скрипт, который понимает HTML и написан на CoffeScript. Сама библиотека порт оригинального скрипта, написанного на Ruby. Вы можете использовать следующий код, который мы скомпилировали из CoffeScript, чтобы получить копию htmldiff.js:

/**
* htmldiff.js a diff algorithm that understands HTML, and produces HTML in the browser.
*
* @author https://github.com/tnwinc
* @see https://github.com/tnwinc/htmldiff.js
*/
!function(){var e,n,t,r,i,f,_,a,o,s,u,h,l,c,d,b,p;o=function(e){return">"===e},s=function(e){return"<"===e},h=function(e){return/^\s+$/.test(e)},u=function(e){return/^\s*]+>\s*$/.test(e)},l=function(e){return!u(e)},e=function(){return function(e,n,t){this.start_in_before=e,this.start_in_after=n,this.length=t,this.end_in_before=this.start_in_before+this.length-1,this.end_in_after=this.start_in_after+this.length-1}}(),a=function(e){var n,t,r,i,f,_;for(f="char",t="",_=[],r=0,i=e.length;r",_.push(t),t="",f=h(n)?"whitespace":"char"):t+=n;break;case"char":s(n)?(t&&_.push(t),t="<",f="tag"):/\s/.test(n)?(t&&_.push(t),t=n,f="whitespace"):/[\w\#@]+/i.test(n)?t+=n:(t&&_.push(t),t=n);break;case"whitespace":s(n)?(t&&_.push(t),t="<",f="tag"):h(n)?t+=n:(t&&_.push(t),t=n,f="char");break;default:throw new Error("Unknown mode "+f)}return t&&_.push(t),_},f=function(n,t,r,i,f,_,a){var o,s,u,h,l,c,d,b,p,g,w,v,k,m,y;for(s=i,o=_,u=0,w={},c=h=m=i,y=f;m<=y?hy;c=m<=y?++h:--h){for(k={},d=0,b=(p=r[n[c]]).length;du&&(s=c-v+1,o=l-v+1,u=v)}w=k}return 0!==u&&(g=new e(s,o,u)),g},d=function(e,n,t,r,i,_,a,o){var s;return null!=(s=f(e,0,t,r,i,_,a))&&(r=r)break;f+=(a=t(f,n,u)).length,_+=a.join("")}return _},(c={equal:function(e,n,t){return n.slice(e.start_in_before,+e.end_in_before+1||9e9).join("")},insert:function(e,n,t){var r;return r=t.slice(e.start_in_after,+e.end_in_after+1||9e9),p("ins",r)},delete:function(e,n,t){var r;return r=n.slice(e.start_in_before,+e.end_in_before+1||9e9),p("del",r)}}).replace=function(e,n,t){return c.delete(e,n,t)+c.insert(e,n,t)},b=function(e,n,t){var r,i,f,_;for(_="",r=0,i=t.length;r

`Заметка`

Вы можете создать свой собственный файл JS с помощью онлайн-конвертера, как js2.coffee, просто вставьте оригинальный код CoffeScript и это все.

Скрипт поддерживает несколько модулей, что означает, что он должен работать как модуль Node.js или модуль AMD (RequireJS), или даже просто как тег скрипта (окно). Для получения дополнительной информации об этом скрипте, пожалуйста, посетите официальный репозиторий на Github здесь.

`2. Использование скрипта`

В этом примере хорошо использовать его в браузере по-старому с одним тегом script:

Сценарий не может быть более простым, чтобы использовать его, вам просто нужно использовать функцию htmldiff, которая ожидает 2 аргумента, старую версию HTML в качестве первого аргумента и версию для сравнения в качестве второго аргумента. Функция является синхронной, поэтому она немедленно возвращает вывод diff. Например, учитывая следующий фрагмент:

let originalHTML = `
Hello Mr. Wayne, decide what to do:

Call Alfred
Take Thalia Al Gul to the cinema
Save Gotham

Use the mouse to choose an option.
`;
let newHTML = `
Hello Batman, decide what to do:

Kill The Joker
Save Thalia Al Gul
Save Gotham

Use the batarang to choose an option.
`;
// Diff HTML strings
let output = htmldiff(originalHTML, newHTML);
// Show HTML diff output as HTML (crazy right?)!
document.getElementById("output").innerHTML = output;

И учитывая следующие правила CSS для тегов diff (ины а также дель теги):

ins {
text-decoration: none;
background-color: #d4fcbc;
}
del {
text-decoration: line-through;
background-color: #fbb6c2;
color: #555;
}

Наш элемент вывода, где будет показан наш HTML, будет отображаться:

Довольно круто, верно? Как вы можете видеть, никогда не было так просто сравнивать содержимое из редактора WYSIWYG без создания сложного кода для сравнения каждого узла в нужном элементе. Благодаря htmldiff вы сможете реализовать это за считанные минуты!