Получение выделенного текста в браузере, кроссплатформенность

Одна из вещей, которые я хотел бы сделать в своем приложении на основе браузера, — позволить пользователю выбирать какой-либо текст (не в «текстовой области», просто обычный текст!), и чтобы мое приложение открывало небольшую панель инструментов, которая затем может взаимодействовать со следующим (в моем случае добавлять аннотации).

Я нашел в Google много материала, который, кажется, сосредоточен на написании WYSIWYG-редакторов, но это не то, что мне нужно, и большая часть этого работает в IE, но не в FF2 или 3. В идеале мне нужна функция, которая может возвращать текущий выделенный текст в окне браузера, работающая в IE7 (и 6, если возможно), FireFox 2 и 3 и Safari 2. Если это работает в Opera, это будет плюсом, но не требованием.

У кого-нибудь есть функция, которая это делает? Или идея с чего начать?


javascript browser
person Tim Sullivan    schedule 13.08.2008    source источник

Ответы (6)


arrow_upward
8
arrow_downward

Взгляните на jQuery и плагин WrapSelection. Это может быть то, что вы ищете.

person palehorse    schedule 13.08.2008

arrow_upward
17
arrow_downward

Этот плагин jQuery классный, но он выполняет очень специфическую задачу: оборачивает текст, который вы выделяете, тегом. Это может быть именно то, что вы хотите. Но если вы не хотите (или находитесь в ситуации, когда не можете) добавлять какую-либо постороннюю разметку на свою страницу, вместо этого вы можете попробовать следующее решение:

function getSelectedText() {
  var txt = '';

  if (window.getSelection) {
    txt = window.getSelection();
  }
  else if (document.getSelection) {
    txt = document.getSelection();
  }
  else if (document.selection) {
    txt = document.selection.createRange().text;
  }
  else return; 

  return txt;
}

Эта функция возвращает объект, представляющий выделенный текст. Он работает во всех браузерах (хотя я подозреваю, что возвращаемые им объекты будут немного отличаться в зависимости от браузера и зависят только от фактического текста результата, а не от каких-либо дополнительных свойств).

Примечание. Сначала я обнаружил этот фрагмент кода здесь: http://www.codetoad.com/javascript_get_selected_text.asp

person Greg Borenstein    schedule 04.10.2008
comment
Вам нужно позвонить toString(). getSelection вернуть объект Selection. Проверено в Хроме. - person jcubic; 17.02.2014
comment
Похоже, это не работает при вводе в Firefox, Edge 14 или IE11. - person Benno; 24.02.2017
comment
похоже, что в наши дни достаточно использовать window.getSelection (проверено в Chrome, FF, IE 11, Edge). CanIUse сообщает то же самое: только сообщается, что Opera Mini не поддерживает его (возможно, он устарел) и iOS Safari не поддерживает некоторые вещи, не относящиеся к заданному вопросу - person YakovL; 04.01.2019

arrow_upward
1
arrow_downward

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

Мой опыт показывает, что работать с этими различными API напрямую довольно неудобно, поэтому, если wrapSelection работает для вас, я пойду с этим.

person Walter Rumsby    schedule 17.08.2008

arrow_upward
1
arrow_downward

В наши дни этого метода должно быть достаточно:

function getSelectedText() {
    return window.getSelection ? window.getSelection().toString() : '';
}

Он будет возвращать '' в редких случаях для действительно старых браузеров и может быть в случае Opera Mini (хотя он может быть устаревшим для тестирования) + см. примечание для UC Browser для Android.

person YakovL    schedule 04.01.2019

arrow_upward
-2
arrow_downward

Поведение отдельных браузеров в отношении выбора описано здесь.

person eplawless    schedule 17.08.2008
comment
зачем дублировать ссылку, уже размещенную в другом ответе? не могли бы вы удалить этот ответ? - person YakovL; 21.01.2020

arrow_upward
-3
arrow_downward

Этот код работает в Safari, IE и Firefox — надеюсь, он вам поможет.

var str = (window.getSelection) ? window.getSelection() : document.selection.createRange();
str = str.text || str;
str = str + ''; // the best way to make object a string...
person Polsonby    schedule 17.08.2008