JavaScript Selection — виділений користувачем текст

Selection — те, що користувач виділив на сторінці. Дістається через window.getSelection().

правити

Загальний опис

Найпростіше з нього беруть текст: String(selection) віддає виділений рядок. Цього досить для кнопки «поділитись цитатою» чи власного меню на виділення.

Глибше — це набір Range-діапазонів (getRangeAt(0)), і саме через них редактори роблять форматування: обгортають виділене в теґ, замінюють, вирізають.

Властивість isCollapsed каже, що виділення порожнє — тобто це просто курсор, а не діапазон. Перевіряти її варто завжди: без неї кнопки редактора спрацьовують на порожнечі.

правити

Порада

Подія selectionchange на document дозволяє показувати панель форматування рівно тоді, коли щось виділили — і ховати, коли виділення зняли.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

const sel = window.getSelection();

методи

властивості

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
Selection	1+	1+	1+	7+	12+	9+

Підтримка: мобільні переглядачі

Переглядач
Selection	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

<p>Виділи будь-який фрагмент цього абзацу.</p>

document.addEventListener('selectionchange', () => {
    const selection = window.getSelection();

    // порожнє виділення — це просто курсор
    if (selection.isCollapsed) {
        panel.hidden = true;
        return;
    }

    const text = String(selection);
    console.log('Виділено:', text, '(' + text.length + ' символів)');

    // де саме виділення на екрані — щоб поставити панель поруч
    const rect = selection.getRangeAt(0).getBoundingClientRect();

    panel.style.top = (rect.top + window.scrollY - 40) + 'px';
    panel.style.left = rect.left + 'px';
    panel.hidden = false;
});