Книга: JavaScript. Подробное руководство, 6-е издание

15.10.3. Получение выделенного текста

15.10.3. Получение выделенного текста

Иногда удобно иметь возможность определять, какой участок текста документа выделен пользователем. Сделать это можно, как показано ниже:

function getSelectedText() {
  if (window.getSelection) // Функция, определяемая стандартом HTML5
    return window.getSelection().toString();
  else
    if (document.selection) // Прием, характерный для IE.
      return document.selection.createRange().text;
}

Стандартный метод window.getSelection() возвращает объект Selection, описывающий текущий выделенный текст, как последовательность одного или более объектов Range. Объекты Selection и Range определяют чрезвычайно сложный прикладной интерфейс, который практически не используется и не описывается в этой книге. Наиболее важной и широко реализованной (везде, кроме IE) особенностью объекта Selection является его метод toString(), который возвращает простое текстовое содержимое выделенной области.

Броузер IE определяет иной прикладной интерфейс, который не описывается в этой книге. Метод document.selection возвращает объект, представляющий выделенную область. Метод createRange() этого объекта возвращает реализованный только в IE объект TextRange, свойство text которого содержит выделенный текст.

Прием, подобный приведенному в примере выше, в частности, может пригодиться в букмарклетах (раздел 13.2.5.1) для организации поиска выделенного текста в поисковых системах или на сайте. Так, следующая HTML-ссылка пытается отыскать текущий выделенный фрагмент текста в Википедии. Если поместить в закладку эту ссылку и URL-адрес со спецификатором javascript:, закладка превратится в букмарклет:

<а href="javascript: var q;
       if (window.getSelection)
         q = window.getSelection().toString();
       else
         if (document.selection)
           q = document.selection.createRange().text;
       void window.open('http://ru.wikipedia.org/wiki/' + q);">
  Поиск выделенного текста в Википедии
</а>

В примере выше, выбирающем выделенный текст, есть одна проблема, связанная с несовместимостью. Метод getSelection() объекта Window не возвращает выделенный текст, если он находится внутри элемента <input> или <textarea>: он возвращает только тот текст, который выделен в теле самого документа. В то же время свойство document.selection, поддерживаемое броузером IE, возвращает текст, выделенный в любом месте в документе.

Чтобы получить текст, выделенный в текстовом поле ввода или в элементе <textагеа>, можно использовать следующее решение:

elt.value.substring(elt.selectionStart, elt.selectionEnd);

Свойства selectionStart и selectionEnd не поддерживаются в версиях IE8 и ниже.

Оглавление книги