Выбор текста в HTML элементе кликом: JavaScript решение

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

Для мгновенного выделения текста в DOM-элементе используйте функции window.getSelection() и document.createRange():

function highlightText(element) {
    const range = document.createRange();
    const selection = window.getSelection();
    range.selectNodeContents(element);
    selection.removeAllRanges();
    selection.addRange(range);
}

highlightText(document.getElementById('targetElement'));

Чтобы активировать функцию, замените 'targetElement' на ID элемента, текст в котором вы хотите выделить. Данный код эмулирует эффект выделения текста мышью.

Применение кода

Работа с элементами, которые не являются полями для ввода

Предложенные здесь решения одинаково работают со всеми видами элементов, будь то поля ввода или элементы вроде div, span и paragraph.

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

Особенности работы с ифреймами

Когда работаете с ифреймами, не забывайте использовать подходящий объект документа. И всегда помните про безопасность: все операции должны проводиться в пределах одного и того же домена.

Вариант для jQuery

Если вы предпочитаете использовать jQuery, вот вам версия функции, написанная в удобном для jQuery стиле:

$.fn.highlightText = function() {
    return this.each(function() {
        const element = this;
        const range = document.createRange();
        const selection = window.getSelection();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    });
};

$('#targetElement').highlightText();

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

Представьте, как выделенные ключевые части текста выделяются:

📖 До: "Выделение текста в элементе может повысить вовлеченность пользователя."

🖍 Выделено: **Выделение текста в элементе** может повысить вовлеченность пользователя.

📖 После: Внимание пользователей сосредоточено на **[Выделение текста в элементе]**, выделяющемся на фоне остального текста.

Ваш JavaScript-код работает подобно фонарику (🔦), который освещает важные детали в темноте:

Темная комната: 😶 [Абзац текста...]
Фонарик: 🔦 **[Выделенная часть текста]**
Освещенная зона: 😮 **[Выделенная часть текста]** становится более заметной на общем фоне текста.

Расширенные сценарии использования

Учет особенностей мобильных устройств

С учетом того, как активно сегодня используются мобильные устройства, убедитесь, что ваш код корректно работает на сенсорных устройствах, следя за событиями touchstart и touchend.

Учитывайте пользователей, которые предпочитают клавиатуру

Разработайте возможность использования вашего решения для пользователей, предпочитающих работать с помощью клавиатуры. Возможно, вам придется следить за событиями типа keydown и активировать выделение текста при нажатии определенных комбинаций клавиш.

Динамическое содержимое и одностраничные приложения

В одностраничных приложениях (SPA) или на сайтах с динамическим контентом используйте MutationObserver для отслеживания изменений в DOM и выделения текста в новых элементах.

Инклюзивность — это важно

Не забывайте об идеях инклюзивности. Функционал выделения текста может быть препятствием для пользователей, использующих скринридеры. Убедитесь, что ваше решение доступно для всех и корректно воспринимается вспомогательным программным обеспечением.

Безопасность

Тщательно следите за вопросами безопасности, особенно при работе с кросс-доменными ифреймами или пользовательским контентом. Санитизируйте пользовательский ввод и строго соблюдайте политику безопасности содержимого (CSP).

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

1. Selection – Web APIs | MDN — подробное руководство по программному выделению текста с помощью JavaScript на сайте MDN.
2. ::selection | CSS-Tricks — всё, что нужно знать о псевдоэлементе ::selection, с помощью которого можно стилизовать пользовательское выделение текста.
3. Введение в Range — полезная статья, представляющая собой введение в работу с объектами Range и с учетом различий в подходах различных браузеров.
4. Selection and Range — свежий и актуальный подход к обучению работе с Selection и Range в JavaScript.
5. Как создать ползунки диапазона — пошаговое руководство по созданию индикаторов выделения текста с помощью ползунков.
6. Работа с Range и Selection в JavaScript — подробная статья на тему работа с выделением текста в JavaScript с использованием объектов Range на сайте Medium.