Подсветка

Интерфейс Highlight API пользовательской подсветки CSS используется для представления набора экземпляров Range, которые необходимо стилизовать с помощью API.

Чтобы стилизовать произвольные диапазоны на странице, создайте новый объект Highlight, добавьте в него один или несколько объектов Range, и зарегистрируйте его с помощью HighlightRegistry.

Экземпляр Highlight представляет собой объект, похожий на Set, который может содержать один или несколько объектов Range.

Highlight()

Возвращает новый объект Highlight.

Интерфейс Highlight не наследует никаких свойств.

Highlight.priority

Число, указывающее приоритет этого объекта Highlight. При перекрытии нескольких выделений браузер использует этот приоритет для определения способа стилизации перекрывающихся частей.

Highlight.size Только чтение

Возвращает количество диапазонов в объекте Highlight.

Highlight.type

Перечислимое значение String, используемое для указания семантического значения выделения. Это позволяет средствам вспомогательных технологий включать это значение при отображении выделения пользователям.

Интерфейс Highlight не наследует никаких методов.

Highlight.add()

Добавить новый диапазон в это выделение.

Highlight.clear()

Удалить все диапазоны из этого выделения.

Highlight.delete()

Удалить диапазон из этого выделения.

Highlight.entries()

Возвращает новый объект итератора, содержащий каждый диапазон в объекте выделения в порядке вставки.

Highlight.forEach()

Вызывает указанный обратный вызов один раз для каждого диапазона в объекте выделения в порядке вставки.

Highlight.has()

Возвращает логическое значение, подтверждающее, присутствует ли диапазон в объекте выделения или нет.

Highlight.keys()

Псевдоним для Highlight.values().

Highlight.values()

Возвращает новый объект итератора, который возвращает диапазоны в объекте выделения в порядке вставки.

Следующий пример демонстрирует, как создать диапазоны, создать для них новый объект Highlight и зарегистрировать его для стилизации на странице:

const parentNode = document.getElementById("foo");

// Create a couple of ranges.
const range1 = new Range();
range1.setStart(parentNode, 10);
range1.setEnd(parentNode, 20);

const range2 = new Range();
range2.setStart(parentNode, 40);
range2.setEnd(parentNode, 60);

// Create a custom highlight for these ranges.
const highlight = new Highlight(range1, range2);

// Register the ranges in the HighlightRegistry.
CSS.highlights.set("my-custom-highlight", highlight);

Следующий фрагмент CSS демонстрирует, как стилизовать зарегистрированную пользовательскую подсветку с помощью псевдоэлемента ::highlight:

::highlight(my-custom-highlight) {
  background-color: peachpuff;
}

• API CSS Custom Highlight
• CSS Custom Highlight API: Предварительный просмотр возможностей выделения диапазонов текста на веб-страницах