تشخیص تفاوت محتوا ( تغییرات ) نوشته با کتابخانه 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 به ترتیب رشته قدیمی و جدید است که تفاوت آن را در پایین مشاهده می کنید .

خاکستری : بدون تغییر
قرمز : پاک شده
سبز : اضافه شده
دانلود پروژه تشخیص تفاوت محتوا ( تغییرات ) نوشته
ارسال نظر