JavaScript: быстро вставлять текст в длинную текстовую область

Question

Я играю с созданием текстового редактора на основе HTML-текста для редактирования моих скриптов (например, с помощью Mozilla Prism + локальный хост / веб-сервер). Пока все работает нормально, но когда я хочу вставить что-то в позицию курсора, в Firefox происходит медленно, когда в текстовой области много текста (Chrome работает отлично). Например. с заполненной текстовой областью 133 Кб для вставки 4 пробелов требуется около 1 с.

У меня уже есть и я использую elm.selectionStart и elm.selectionEnd. Основываясь на этом, я затем копирую текст, манипулирую им и устанавливаю значение обратно в текстовую область - возможно, именно это и является причиной узкого места (я использую аналогичный подход , как и ранее на этом сайте ) , В идеале я бы хотел иметь что-то вроде elm.selectedText = 'foobar', но не могу найти это ...

Это не обязательно должен быть кроссбраузер ...

Может кто-нибудь помочь?

Answer 1

Согласно этой статье о codemirror , использование designMode происходит быстрее, чем использование textarea, потому что вы можете редактировать части содержимого вместо того, чтобы редактировать весь текст за один раз.

Answer 2

Существует API, который заменяет выделенный текст: textarea.setRangeText('text').

Вот демоверсия:

const textarea = document.querySelector('textarea');
textarea.addEventListener('click', () => {
  textarea.setRangeText('WOW');
});

<textarea rows="10" cols="40">Click anywhere or select any text in here. It will be replaced by WOW</textarea>

Также есть document.execCommand('insertText') с поддержкой undo, но это не кросс-браузер. Попробуйте insert-text-textarea для кросс-браузерного решения.