تشخیص تفاوت محتوا ( تغییرات ) نوشته با کتابخانه JsDiff

تشخیص تفاوت محتوا ( تغییرات ) نوشته – با کمک کتابخانه JsDiff این امکان را خواهیم داشته که تغییرات 2 نوشته را تشخیص دهیم که شامل

بخش های اضافه شده ، پاک شده ، و بدون تغییر است و می توانیم با رنگ های مورد نظر مان نمایش دهیم .

برای شروع کار ابتدا کتابخانه jsdiff را اضافه کنید .

<script src="lib/diff.min.js"></script>

اکنون یک تگ با آیدی display اضافه کنید :

<div id="display"></div>

حال کد اصلی برای نمایش نتیجه :

var one = 'rapio',
    other = 'rapid',
    color = '',
    span = null;

var diff = Diff.diffChars(one, other),
    display = document.getElementById('display'),
    fragment = document.createDocumentFragment();

diff.forEach(function(part){
 
  color = part.added ? 'lime' :
    part.removed ? 'red' : 'grey';
  span = document.createElement('span');
  span.style.color = color;
  span.appendChild(document
    .createTextNode(part.value));
  fragment.appendChild(span);
});

display.appendChild(fragment);

خطا 1 و 2 : one و other به ترتیب رشته قدیمی و جدید است که تفاوت آن را در پایین مشاهده می کنید .

خاکستری : بدون تغییر
قرمز : پاک شده
سبز : اضافه شده

دانلود پروژه تشخیص تفاوت محتوا ( تغییرات ) نوشته