Diff Checker

Diff Checker

Порівнюйте два тексти або фрагменти коду з підсвіткою на рівні рядків і слів. Пліч-о-пліч або в єдиному вигляді, з ігноруванням пробілів і регістру — повністю у вашому браузері.

Ні. Увесь інструмент — це JavaScript, що виконується всередині цієї сторінки. Алгоритм diff (longest-common-subsequence) працює на вашому процесорі, а результат відмальовується безпосередньо в DOM. Відкрийте DevTools → Network і подивіться — під час порівняння не надсилається жодного запиту. Безпечно вставляти внутрішній код, дані клієнтів, чернетки контрактів та все інше, що ви не хотіли б записувати на серверному інструменті.

Спершу ми розбиваємо обидва введення на рядки й запускаємо алгоритм LCS (longest common subsequence). Рядки, що збігаються з обох боків, позначаються як рівні. Рядки, що не збігаються, об'єднуються в рядки 'зміна', коли додавання стоїть поруч із видаленням. Для кожної такої пари ми запускаємо другий LCS на словах рядка (розбитих за пробілами), тож підсвічуються червоним/зеленим лише фактично змінені слова — а не весь рядок.

Чому iKit Diff Checker

Чистий і швидкий майданчик для порівняння тексту без реклами, спливаючих вікон і сторонніх трекерів — створений для розробників, авторів і всіх, кому треба побачити, що змінилося.

Перегляд пліч-о-пліч + єдиний

Перемикайтеся між розділеним (дві колонки, як у класичному IDE) і єдиним (одна колонка з позначками +/−) виглядом одним кліком. Обидва режими показують номери рядків і підсвічують кожну зміну в рядку.

Підсвітка на рівні слів

Коли два рядки відрізняються, ми запускаємо другий diff на рівні слів, тож підсвічуються лише реальні відмінності — а не весь рядок. Легше помітити одну друкарську помилку в рядку зі 200 символів.

Ігнорування пробілів і регістру

Перемикайте чутливість до пробілів і регістру, щоб відфільтрувати косметичні зміни (переформатовані відступи, корекцію великих літер) і зосередитися на справжніх правках.

Конфіденційність за задумом

Обидва тексти залишаються у вкладці вашого браузера. Алгоритм diff виконується локально на JavaScript. Це можна перевірити в DevTools → Network: під час набору не надсилається жодного запиту.

Статистика + копіювання

Швидко дізнавайтеся, скільки рядків додано, видалено й змінено. Один клік копіює diff у буфер обміну, щоб вставити його в код-рев'ю чи повідомлення коміту.

Працює офлайн

Після завантаження сторінки кожен байт обчислюється локально. Працює в літаку, за корпоративним фаєрволом або взагалі без мережі — корисно для конфіденційних код-рев'ю.

Як насправді працює diff checker

Математика під капотом старша за веб — алгоритм 1965 року під назвою LCS і вдосконалення 1986 року від Юджина Маєрса.

  1. 1

    Розбиття на рядки

    Обидва введення розбиваються по \n (або \r\n). Кожен рядок стає токеном. Ми порівнюємо токени — а не символи — бо більшість правок у реальному коді чи документах додають, видаляють або змінюють цілі рядки.

  2. 2

    Обчислення LCS

    Найдовша спільна підпослідовність (Longest Common Subsequence) — це найбільший набір рядків, що з'являються в одному порядку в обох введеннях. Ми заповнюємо DP-таблицю, рухаючись від нижнього правого кута; кожна клітинка містить довжину LCS від цієї позиції до кінця. Це займає O(m × n) часу й пам'яті.

  3. 3

    Зворотний прохід для виведення операцій

    Починаючи з лівого верхнього кута таблиці, ми йдемо вперед: якщо два поточні рядки збігаються, виводимо equal; інакше обираємо напрямок (праворуч або донизу), що зберігає довжину LCS, виводячи delete або insert. Результат — послідовність операцій, які перетворюють Оригінал на Змінений.

  4. 4

    Diff на рівні слів усередині пар змін

    Коли за видаленням слідує вставка, ми поєднуємо їх у рядок зміна. Щоб підсвітити лише ті частини, що відрізняються в межах рядка, ми запускаємо той самий алгоритм LCS вдруге на словах кожного боку, розбиваючи їх за межами пробілів.

Типові завдання diff

Реальні ситуації, у яких знадобиться diff checker.

Перегляд PR перед коментуванням

Перегляд diff на GitHub чудовий, але іноді хочеться побачити лише змістовні зміни без шуму від форматера. Вставте обидві версії, увімкніть Ігнорувати пробіли — і косметичні переформатування зникнуть, залишивши тільки логічні правки.

Порівняння двох чернеток контракту

Юристам та операційним командам часто треба знати, що змінилося між v1 і v2 контракту. Вставте обидві версії — отримайте кольоровий diff із підсвіткою на рівні слів — без Word, без Track Changes, без завантаження конфіденційних умов на сторонній сервер.

Перевірка, що насправді зробила правка скриптом

Прогнали sed/awk/Python regex по конфігураційному файлу? Вставте оригінал і результат сюди, щоб переконатися, що скрипт відредагував лише те, що ви очікували. Підсвітка на рівні символів ловить випадкові правки, які пропускає швидкий візуальний огляд.

Виявлення друкарської помилки в перекладі

Пара перекладу (оригінал проти перекладу або два переклади того самого джерела) — diff на рівні слів робить тривіальним пошук пропущеного слова, дубльованої фрази чи перекрученої пунктуації, які пропустили коректори.

Чому локальне порівняння має значення

Тексти, які ви порівнюєте, зазвичай приватні: код із внутрішніх репозиторіїв, чернетки контрактів, експорти даних клієнтів або ще не випущені продуктові тексти. Вставка їх у чужий сервер створює слід, який ви не контролюєте. Diff checker від iKit — це JavaScript, уже завантажений у вкладці вашого браузера: порівняння виконується на вашому процесорі й ніколи не торкається мережевого сокета.

  • Жодних мережевих запитів під час порівняння — це можна перевірити в DevTools → Network.
  • Введення залишаються в пам'яті браузера; очищаються при натисканні Очистити або оновленні сторінки.
  • Безпечно для внутрішнього коду, документів під NDA, стенограм підтримки клієнтів і всього, що підпадає під політики резидентності даних.

Related guides

Deep-dive tutorials and tool comparisons from the iKit blog.

Поширені запитання

Чи це безпечно? Чи завантажуються мої тексти кудись?

Ні. Увесь інструмент — це JavaScript, що виконується всередині цієї сторінки. Алгоритм diff (longest-common-subsequence) працює на вашому процесорі, а результат відмальовується безпосередньо в DOM. Відкрийте DevTools → Network і подивіться — під час порівняння не надсилається жодного запиту. Безпечно вставляти внутрішній код, дані клієнтів, чернетки контрактів та все інше, що ви не хотіли б записувати на серверному інструменті.

Як працює підсвітка на рівні рядків і слів?

Спершу ми розбиваємо обидва введення на рядки й запускаємо алгоритм LCS (longest common subsequence). Рядки, що збігаються з обох боків, позначаються як рівні. Рядки, що не збігаються, об'єднуються в рядки 'зміна', коли додавання стоїть поруч із видаленням. Для кожної такої пари ми запускаємо другий LCS на словах рядка (розбитих за пробілами), тож підсвічуються червоним/зеленим лише фактично змінені слова — а не весь рядок.

Яка різниця між Розділеним і Єдиним переглядом?

Розділений вигляд показує два тексти пліч-о-пліч із парними номерами рядків — ближче до того, як diff виглядає в IDE (VS Code, JetBrains). Єдиний вигляд показує одну колонку з рядками з префіксами +/− — ближче до того, що друкує `git diff`. Обирайте те, що відповідає вашому процесу; обидва режими показують ті самі дані.

Чим допомагає 'ігнорувати пробіли'?

Переформатування коду (запуск Prettier, перехід між табуляцією й пробілами, нормалізація закінчень рядків) додає візуального шуму, який ховає справжні зміни. Перемикач 'Ігнорувати пробіли' стискає послідовності пробілів/табуляцій до одного пробілу й обрізає краї рядків перед порівнянням — тож ви бачите лише змістовні правки, а не косметичні.

Який найбільший обсяг можна порівняти у браузері?

Алгоритм LCS використовує O(m × n) пам'яті, де m і n — кількість рядків з кожного боку. iKit обмежує порівняння приблизно 4 мільйонами клітинок (≈16 МБ), що цілком справляється з кількома тисячами рядків проти кількох тисяч. Для більших diff (повні дампи бази даних, повнофайлові логи) використовуйте CLI-інструмент на кшталт `diff` чи `git diff --no-index` — вони використовують розумніший алгоритм (Myers diff), що масштабується до мільйонів рядків.