Получить выделенный / выделенный текст

351

Можно ли получить выделенный текст в абзаце веб-сайта, например, с помощью jQuery?

javascript jquery textselection Дэн
источник
2
Вот рабочее решение dipaksblogonline.blogspot.in/2014/11/…
Дипак
Простой JavaScript работал для меня. document.getSelection (). anchorNode.data.substr (document.getSelection (). anchorOffset, document.getSelection (). focusOffset-document.getSelection (). anchorOffset)
Rohit Verma
@RohitVerma: Это сработает только в простом случае выделения, которое содержится в одном текстовом узле, что ни в коем случае не гарантируется.
Тим Даун
@Dipak Как вы копируете функциональность социального обмена из блога, на который вы ссылаетесь в своем посте? Вместо того, чтобы просто возвращать выбранную строку, я пытаюсь заполнить эту переменную в твиттер-ссылке.

Ответы:

481

Получить текст, выбранный пользователем, относительно просто. Там нет никакой выгоды , которые можно получить путем привлечения JQuery , так как вам не нужно ничего другого , чем windowи documentобъектов.

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

Если вы заинтересованы в реализации, которая также будет работать с выборками <textarea>и <input>элементами texty , вы можете использовать следующее. Поскольку сейчас 2016, я опускаю код, необходимый для поддержки IE <= 8, но я опубликовал материал для этого во многих местах на SO.

function getSelectionText() {
    var text = "";
    var activeEl = document.activeElement;
    var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
    if (
      (activeElTagName == "textarea") || (activeElTagName == "input" &&
      /^(?:text|search|password|tel|url)$/i.test(activeEl.type)) &&
      (typeof activeEl.selectionStart == "number")
    ) {
        text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
    } else if (window.getSelection) {
        text = window.getSelection().toString();
    }
    return text;
}

document.onmouseup = document.onkeyup = document.onselectionchange = function() {
  document.getElementById("sel").value = getSelectionText();
};
Selection:
<br>
<textarea id="sel" rows="3" cols="50"></textarea>
<p>Please select some text.</p>
<input value="Some text in a text input">
<br>
<input type="search" value="Some text in a search input">
<br>
<input type="tel" value="4872349749823">
<br>
<textarea>Some text in a textarea</textarea>
Развернуть фрагмент

Тим Даун
источник
9
Что еще, если {} -форк хорош? что такое «контроль»?
Дан
29
@Dan: Извините, я пропустил этот вопрос (не думаю, что ТАК предупредил меня об этом). Вторая ветвь для IE <= 8 (IE 9 реализует window.getSelection()). document.selection.typeПроверка проверяет , что выбор является выделение текста , а не выбор управления. В IE выделение элемента управления - это выделение внутри редактируемого элемента, содержащего один или несколько элементов (таких как изображения и элементы управления формы) с контурами и маркерами изменения размера. Если вы вызовете .createRange()такой выбор, вы получите ControlRangeскорее, чем TextRange, и ControlRanges не имеют textсвойства.
Тим Даун
2
@TimDown Очень трудно сказать «jQuery не имеет X», потому что, конечно, с правильным плагином он может делать все, что вы можете сделать в браузере с помощью javascript. В этом случае у нас есть jquery.selection ( madapaja.github.io/jquery.selection ). В равной степени неправильно говорить «и не должно». Я приехал сюда, потому что искал именно это. У меня есть вариант использования, и JQuery является правильным решением.
Auspex
8
@Auspex: Я вроде вижу вашу точку зрения, но я не согласен. Плагин jQuery - это библиотека, которая зависит от jQuery; это не само по себе jQuery. В случае обработки выбора сама jQuery ничего не предоставляет (как и должно быть, потому что обработка выбора - не то, для чего предназначена jQuery), поэтому любое решение, использующее jQuery, использует его случайно.
Тим Даун
1
@ Dennis98: я не раздражаюсь удаленно и не обижаюсь :) Проверка типов ввода происходит потому, что вы получаете предупреждения в консоли в Chrome, если вы пытаетесь получить доступ, selectionStartили selectionEndв <input>типе элемента (например, «число»), который не поддержать его (см. , например, jsfiddle.net/6zoposby/2 ). Я оставил проверку на существование selectionStartтак, чтобы код не сломался в IE <= 8. Я допускаю, что проверка, activeElementвероятно, излишняя. Я использую, sliceпотому что это более мощный (хотя это не полезно здесь) и немного короче, чем тип substring.
Тим Даун
111

Получить выделенный текст следующим образом:

window.getSelection().toString()

и, конечно, особый режим для:

document.selection.createRange().htmlText
Парпар
источник
2
Для IE> = 10 « document.selection поддержка была удалена в IE10 и заменена на window.getSelection ». Источник: connect.microsoft.com/IE/feedback/details/795325/...
user2314737
Это не удастся при нескольких условиях в различных браузерах (например, Firefox).
Макьен,
11

Это решение работает, если вы используете Chrome (не можете проверить другие браузеры) и если текст находится в том же элементе DOM:

window.getSelection().anchorNode.textContent.substring(
  window.getSelection().extentOffset, 
  window.getSelection().anchorOffset)
Эндрю Кеннеди
источник