Способы вставки текста без HTML в Javascript: execCommand

Быстрый ответ

Приведу код на JavaScript, позволяющий осуществить вставку текста из буфера обмена без форматирования:

// Навешиваем обработчик события вставки
document.addEventListener('paste', function(e) {
  e.preventDefault(); // Отменяем стандартное поведение
  let text = e.clipboardData.getData('text/plain'); // Извлекаем текст без форматирования
  document.execCommand('insertText', false, text); // Производим вставку текста
});

Этот код отлавливает данные из буфера обмена и вставляет их в HTML-документ, оставив форматирование за сценой.

Поддержка браузерами

К сожалению, не все браузеры поддерживают команду 'insertText':

// Проверяем поддержку данной функции
if (document.queryCommandSupported('insertText')) {
  // В случае поддержки пользуемся командой
} else {
  // Если нет, ищем альтернативные способы
}

Так что обеспечьте наличие альтернативных методов вставки текста для тех браузеров, которые не поддерживают 'insertText'.

Когда воспользоваться insertText? Расширенное планирование.

Пользовательские события.

Как реагировать на вставку текста:

• Отменяем стандартное поведение с помощью команды e.preventDefault().
• Извлекаем простой текст, используя e.clipboardData.getData('text/plain').
• Если используете Internet Explorer, замените на window.clipboardData.
• Вставляем текст с применением document.execCommand('insertHTML', false, text) или selection.createRange().pasteHTML(content) для редактируемых элементов.

Подробнее об этом расскажет наш спикер на видео

Управление процессом.

Если браузер незнаком с 'insertText':

• Воспользуйтесь командами range.deleteContents()и range.insertNode(document.createTextNode(text)).
• Небольшая задержка может быть необходима для корректной обработки данного события.

Защита от XSS-атак

Не забывайте проводить очистку вставляемого контента для предотвращения XSS-атак.

Поднятие уровня мастерства

Горячие клавиши и контекстное меню

Создайте сочетания горячих клавиш и настройте контекстное меню для улучшения взаимодействия пользователя с вашим функционалом.

Проверка совместимости

Удостоверьтесь, что ваше решение работает в таких браузерах, как IE11, Chrome, Firefox. Для этого используйте document.execCommand, учитывая специфику каждого из перечисленных браузеров.

Визуализация

Процесс трансформации текста из буфера обмена в HTML-документ:

До document.execCommand: [🌈🧪] ➡️ [💧]

Код для осуществления вставки текста без форматирования:

document.execCommand('insertText', false, clipboardData.getData('text/plain'));

После: [💧] + [🌈🧪] ➡️ [💧]

HTML остается чистым и свежим, как только что приготовленный салат.

Очистка HTML

Быстрое удаление и обновление

Как преобразовать HTML в текст c помощью всего одной строки кода:

var plainText = clipboardData.getData('text/html').replace(/<[^>]*>/g, "");

Мониторинг элементов с атрибутом редактирования

Добавляем обработчик событий элементам с атрибутом contenteditable="true" для отслеживания процесса вставки.

Контроль над вставкой

Проверьте, что текст вставляется корректно и безопасно, исключая HTML-теги.

Полезные материалы

1. Метод execCommand() документа – Web APIs | MDN — исчерпывающая информация о функции execCommand().
2. Альтернативы execCommand() в связи с устареванием – Web APIs | MDN — актуальные подходы на фоне устаревания execCommand().
3. Clipboard API – Web APIs | MDN — современные методы работы с буфером обмена в JavaScript.
4. Как работает функция вставки изображений из буфера обмена в Gmail и Google Chrome 12+? – Stack Overflow — наглядные примеры использования Clipboard API.
5. HTML Global contenteditable Attribute — всё о параметре contenteditable.
6. Native Browser Copy To Clipboard | CSS-Tricks – CSS-Tricks — тонкости работы с буфером обмена.
7. Stream Updates with Server-Sent Events | Articles | web.dev — обновление данных на клиенте сервером и взаимодействие с буфером обмена.