Всем привет! Сегодня мы с вами рассмотрим возможности объекта selection. Данный объект возвращает информацию о выделенной части текста. Итак, поехали!

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

var selection = window.getSelection();
console.log(selection);

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

Для более удобной читабельности все это дело можно облагородить используя метод getRangeAt().

var selection = window.getSelection();
var selRange = selection.getRangeAt(0);
console.log(selRange);

Здесь в объекте selection мы оставили только основные параметры тем самым упрощая работу с данным объектом.

Теперь пойдем по порядку и рассмотрим самые основные свойства(параметры) объекта selection.

Свойство startContainer возвращает весь текст элемента в котором мы осуществили его выделение.

selRange.startContainer;

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

Для того чтобы получить все элементы в которых мы осуществляем выделение текста можно воспользоваться свойством commonAncestorContainer.

selRange.commonAncestorContainer;

В результате нам вернется dom структура элементов, текст которых был выделен.

Для того чтобы их все перебрать достаточно воспользоваться свойством

NodeList. selRange.commonAncestorContainer.childNodes;

На выходе будет получен массив с элементами текст которых был выделен. Чтобы получить текст который мы выделили необходимо воспользоваться еще двумя параметрами startOffset и endOffset. Данные свойства возвращает начальную и конечную позицию строки элемента. Именно эти два параметра и определяют область выделения.

Пример:

var selection = window.getSelection();
var selRange = selection.getRangeAt(0);
var text = selRange.startContainer.data,
	start = selRange.startOffset,
	end = selRange.endOffset;
console.log(text.substring(start, end));

С помощью данного кода мы и получаем часть текста которую выделили. Как видите вначале получаем текст всего элемента, начальную и конечную позицию выделения и помещаем все это дело в переменные. Заметьте что при использовании свойства startContainer мы в конце обращаемся к ключу data. Все дело в том что параметр startContainer изначально возвращает объект в виде строки текста. И для получения самой строки необходимо обратится к ключу data.

В конце при выводе мы используем стандартную функцию substring() в которую передаем начальную и конечную позицию выделения. Отмечу что данный код работает при условии когда выделен текст в пределах одного элемента(тега) страницы.

Для того чтобы получить и соединить текст выделенный в разных элементах необходимо еще немного повозится. Ну да ладно. Оставляю данную задачу вам в качестве домашнего задания для закрепления навыков).

А на этом у меня на сегодня все. Не забывайте оставлять комментарии и подписывайтесь в мою группу

Желаю вам успехов и удачи! Пока.