Для получения полного доступа
зарегистрируйтесь

Сделать сравнение двух текстов (diff) с помощью jQuery


Если вам нужно пользователю отобразить изменения в тексте, то лучший вариант использовать diff. Для этого используем плагин PrettyTextDiff.

Затем нужно сделать следующую разметку:

<table class="diff-wrapper table">
    <thead>
        <tr>
            <th>Оригинал</th>
            <th>Изменено</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="original">
                    Раньше люди считали планету Земля — плоской
                </div>
            </td>
            <td>
                <div class="changed">
                    Сейчас люди считают планету Земля — круглой
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="result"></div>
            </td>
        </tr>
    </tbody>
</table>

Важно! По-умолчанию плагин PrettyTextDiff, в указанном селекторе, будет искать классы original и changed. Если вы хотите указать другие классы, задайте в свойствах originalContainer, changedContainer названия нужных классов.

Чтобы результат сравнения был красиво раскрашен, добавим стили:

ins {
    background-color: #c6ffc6;
    text-decoration: none;
}

del {
    background-color: #ffc6c6;
}

Конечный результат: 1k0Ayhw.png

Плагин вызываем так:

$('.diff-wrapper').prettyTextDiff({
    diffContainer: '.result'
});
  jquery плагины работа с текстом diff PrettyTextDiff

Автор


dfatt
  • Репутация: 255
  • Сниппеты : 49
  • Ревизии : 7
Подписаться

Чтобы увидеть комментарии, нужно быть участником сообщества

Регистрация