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

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

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

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

13.08.2008 23:32:09
6 ОТВЕТОВ
РЕШЕНИЕ

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

8
13.08.2008 23:52:35

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

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

1
17.08.2008 20:21:46

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

-1
17.08.2008 20:25:28
зачем дублировать ссылку уже выложенную в другом ответе? Вы не могли бы удалить этот ответ?
YakovL 21.01.2020 08:36:20

Этот код работает в 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...
-3
7.02.2015 19:38:37

Этот плагин 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

17
7.02.2016 18:25:44
Вам нужно позвонить toString(). getSelectionвернуть объект Selection. Испытано в хром.
jcubic 17.02.2014 12:15:27
Похоже, это не работает на входах в Firefox, Edge 14 или IE11.
Benno 24.02.2017 04:26:32
похоже, что использования window.getSelectionдостаточно в наши дни (протестировано в Chrome, FF, IE 11, Edge). CanIUse говорит то же самое: сообщается, что только Opera Mini не поддерживает его (возможно, устарел), а iOS Safari не поддерживает некоторые вещи, не относящиеся к
YakovL 4.01.2019 12:32:23

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

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

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

1
4.01.2019 13:02:29