Выделите изменения, внесенные в текст пользователем в Javascript

#javascript #jquery #html #editor #diff

#javascript #jquery #HTML #редактор #разница

Вопрос:

Я пытаюсь создать редактируемое текстовое поле на странице, которое выделяет изменения, внесенные пользователем в текст по мере его редактирования. Например, текст, вставленный или измененный пользователем, должен отображаться на цветном фоне, удаления должны быть обозначены добавлением цветного фона к соседним символам (или, может быть, какого-то символа?)… Кажется, это намного сложнее, чем я думал, сделать это в Javascript, и я удивлен, что не смог найти никакого кода, уже реализующего такое текстовое поле.

Знаете ли вы что-нибудь, что реализует то, что я ищу?

Спасибо!

Ответ №1:

Вам следует взглянуть на библиотеки Google Diff, Match и Patch для обычного текста, которые имеют открытый исходный код и доступны на JavaScript среди других языков.

Демонстрация различий.

1. Я использовал diff_match_patch для аналогичной цели и в итоге создал библиотеку-оболочку, чтобы помочь с «презентационной работой», необходимой для использования diff_match_patch: github.com/arnab/jQuery . PrettyTextDiff

Ответ №2:

Step1->
Сохраните исходное значение в переменной V1

Step2->
Сохраните измененное значение в переменной V2

Step3->
Для каждого слова в версии V2 [слова разделены как минимум одним пробелом] сверьте его с версией V1, если это не одно и то же, ВЫДЕЛИТЕ его с помощью HTML-тега!

1. Мы хотим делать это, когда пользователь редактирует текстовое поле, и было бы неэффективно вычислять разницу при каждой операции редактирования.

2. в этом случае вам нужно отслеживать это в событии нажатия клавиши, keyup !

3. Это не решает проблему производительности. Вычисление разницы между двумя версиями всего текста при каждом нажатии клавиши и вводе в действие не является удовлетворительным.

4. Это действительно единственный способ — подождите 2 секунды после ввода и сравните до изменения, выделите это изменение, затем повторите…