Блог

У меня есть редактируемый div, и я хотел бы выделить (применить класс css) определенные слова, ПОКА пользователь все еще вводит текст в div.

Как бы я это сделал, используя Jquery?

Я пытался использовать div.html().replace() etc, но он заменяет его, а затем полностью возвращает курсор к началу.

Прямое изменение html для редактируемого div вызовет проблемы — при сохранении вы не сможете определить разницу между изменением, внесенным пользователем, и тем, которое было сделано скриптом выделения.

Однако вы можете попросить пользователя отредактировать элемент обычного текста, при этом делая вид, что он редактирует выделенный элемент. Добавьте второй div поверх вашего редактируемого div с указателем стиля-события: нет и прозрачным фоном. Пока оба элемента имеют одинаковый размер шрифта, вы будете редактировать версию обычного текста, но видеть цвета из выделенной версии.

Если размер шрифта фиксированный, вы можете пойти еще дальше и использовать textarea вместо редактируемого div. Я использовал этот подход, чтобы заставить редактор подсветки синтаксиса работать на iPad, который не поддерживает встроенное редактирование HTML.