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

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

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

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

Ответов (6)

Решение

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

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

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

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

Этот код работает в 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...

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

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

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

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