JavaScript Range — довільний діапазон у документі

Range (у перекладі — діапазон) описує ділянку документа між двома точками — навіть якщо ці точки стоять посеред тексту.

правити

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

DOM-методи мислять вузлами цілком, а діапазон — точками: «від третього символу цього абзацу до другого символу наступного». Саме так влаштоване виділення мишею, і саме тому Range лежить в основі всіх текстових редакторів.

Що з ним роблять: беруть вміст (cloneContents()), вирізають (extractContents()), обгортають виділене в теґ (surroundContents() — так працює кнопка «жирний»), міряють положення на екрані (getBoundingClientRect()).

Поточне виділення користувача — це набір діапазонів, який віддає Selection.

правити

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

Синтаксис

const range = document.createRange();

властивості

методи

Переглядачі

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

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

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

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

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

Приклади

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

<p id="text">Виділи частину цього тексту й натисни кнопку.</p>
<button id="mark">Підсвітити</button>

document.getElementById('mark').addEventListener('click', () => {
    const selection = window.getSelection();

    if (selection.isCollapsed) {
        return; // нічого не виділено
    }

    const range = selection.getRangeAt(0);

    const highlight = document.createElement('mark');
    // саме так працює кнопка «жирний» у редакторах
    range.surroundContents(highlight);

    selection.removeAllRanges();
});