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

Question

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

267

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

Dan 21 март 2011, в 13:24

Источник

2

Вот рабочее решение dipaksblogonline.blogspot.in/2014/11/…
Dipak 28 нояб. 2014, в 18:30
0

Простой JavaScript работал для меня. document.getSelection (). anchorNode.data.substr (document.getSelection (). anchorOffset, document.getSelection (). focusOffset-document.getSelection (). anchorOffset)
Rohit Verma 27 июнь 2017, в 10:15
0

@RohitVerma: Это сработает только в простом случае выделения, которое содержится в одном текстовом узле, что ни в коем случае не гарантируется.
Tim Down 09 нояб. 2017, в 10:17
0

@Dipak Как вы копируете функциональность социального обмена из блога, на который вы ссылаетесь в своем посте? Вместо того, чтобы просто возвращать выбранную строку, я пытаюсь заполнить эту переменную в твиттер-ссылке.
James Randolph 26 март 2018, в 19:09

Показать ещё 2 комментария

Теги:

javascript

jquery

textselection

3 ответа

Ещё вопросы

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

Tim Down · Answer 1 · 2011-03-21T16-21-00.000Z

381

Получение текста, который пользователь выбрал, относительно прост. Нет никакой пользы от использования 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> и texty <input>, вы можете использовать следующее. Поскольку в 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>

Tim Down 21 март 2011, в 16:21

8

Что еще, если {} -форк хорош? что такое «контроль»?
Dan 27 март 2011, в 10:30
27

@Dan: Извините, я пропустил этот вопрос (не думаю, что ТАК предупредил меня об этом). Вторая ветвь предназначена для IE <= 8 (IE 9 реализует window.getSelection() ). Проверка document.selection.type проверяет, что выделение является выделением текста, а не выбором элемента управления. В IE выделение элемента управления - это выделение внутри редактируемого элемента, содержащего один или несколько элементов (таких как изображения и элементы управления формы) с контурами и маркерами изменения размера. Если вы вызываете .createRange() для такого выбора, вы получаете ControlRange а не TextRange , а ControlRange не имеют text свойства.
Tim Down 30 март 2011, в 15:30
0

Можно ли вызвать эту функцию после какого-либо события? Кажется, это не работает для меня в текстовой области
Rafael Diaz 03 июнь 2014, в 12:28
0

@ Tim Down, +1, это работает во всех моделях браузера? А как сделать выбор, чтобы не разбить слова? (Если здесь есть одно предложение, то today is a wonderful day тогда today is a wonderful day выбора пользователя day is a wonderful d , когда он полностью завершит выбор всего предложения автоматически.) Спасибо.
cj333 04 авг. 2014, в 18:45
0

@ cj333: Да, это будет работать во всех основных браузерах, включая старые версии IE (я думаю, вернемся к версии 4). Что касается расширения до целых слов, некоторые браузеры имеют встроенные функции ( TextRange в IE имеет метод expand() ), а WebKit имеет нестандартный метод expand() в своем расширении DOM Range. Однако это не распространяется на все браузеры. Одним (несколько тяжелым) вариантом для кросс-браузерного решения является модуль TextRange моей собственной библиотеки Rangy.
Tim Down 04 авг. 2014, в 22:43
0

@ Спасибо, спасибо за быстрый ответ. Другой вопрос, как выделить часть выделения мышью? Я думаю, что использование регулярных выражений хуже.
cj333 05 авг. 2014, в 07:39
0

@ cj333: самый простой способ - использовать document.execCommand() : stackoverflow.com/questions/2582831/…
Tim Down 05 авг. 2014, в 09:19
0

Фантастика - может даже изменить окно и документ на iframe для contentWindow и contentDocument, соответственно, и он все еще работает просто отлично.
Two-Bit Alchemist 15 сен. 2014, в 00:44
0

Хотя я бы добавил к этому, если вы хотите, чтобы это также включало выделенный текст во input , вы можете условно использовать комбинацию document.activeElement и свойств DOM selectionStart , selectionEnd и value этого активного элемента, чтобы получить его выделенный текст. Это было полезно для меня, когда мне нужно было отключить пролистывание влево / вправо, когда был выбран ЛЮБОЙ текст на странице.
Turnerj 22 сен. 2014, в 01:51
0

Я не могу не думать о том , что в любое время вы должны закодировать три условия для работы с различными браузерами, есть «преимущество , которые можно получить путем привлечения JQuery»
Auspex 11 фев. 2015, в 15:01
0

@Auspex: Не в этом случае: jQuery вообще не обрабатывает выборки, и не должен.
Tim Down 11 фев. 2015, в 16:12
2

@TimDown Очень сложно сказать «jQuery не имеет X», потому что, конечно, с правильным плагином он может делать все, что вы можете сделать в браузере с помощью javascript. В этом случае у нас есть jquery.selection ( madapaja.github.io/jquery.selection ). В равной степени неправильно говорить «и не должно». Я приехал сюда, потому что искал именно это. У меня есть вариант использования, и JQuery является правильным решением.
Auspex 15 фев. 2015, в 19:33
7

@Auspex: Я вроде вижу вашу точку зрения, но я не согласен. Плагин jQuery - это библиотека, которая зависит от jQuery; это не само по себе jQuery. В случае обработки выбора, сам jQuery ничего не предоставляет (как и должно быть, потому что обработка выбора - не то, для чего нужна jQuery), поэтому любое решение, использующее jQuery, использует его случайно.
Tim Down 16 фев. 2015, в 00:58
0

Я уже знаю , что вы знаете о следующем, @TimDown, но следует отметить, что это не будет работать на textarea с в Firefox. Это известная ошибка .
Dennis98 28 сен. 2016, в 15:13
0

... посмотрите на этот ответ, чтобы он работал в этом случае. :) Вот рабочая скрипка с функцией, которую я использую: jsfiddle.net/r9xps0ws (у меня нет второй проверки, как в этом ответе, потому что мне нет дела до IE 8 и ниже, и я бы сказал, что вы не должны ' т, тоже, если вам действительно не нужно ..
Dennis98 28 сен. 2016, в 15:36
0

@ Dennis98: Я не уверен, что добавление ветки input / textarea уместно в контексте ответа на этот конкретный вопрос, но я понимаю вашу точку зрения. Я думаю, что я сдался и добавил это в ответах в другом месте на SO.
Tim Down 28 сен. 2016, в 16:22
0

@ Dennis98: ... не могу найти его, хотя. Я добавлю это здесь, так как это, кажется, популярная версия этого вопроса.
Tim Down 28 сен. 2016, в 16:27
0

Это был один из первых результатов для меня, и мне не хватало этой информации, поэтому я хотел бы упомянуть об этом. :) Особенно потому, что я искал после этого .. И да, я также видел ответ от вас, где вы указываете на это, следовательно, «Я уже знаю, что вы знаете» - не могу найти его больше, хотя Оо Может быть, от кого-то в дискуссии с вами. Не знал, что это также относится к элементам ввода между прочим - спасибо! :) Хотя, IMO, вы немного переусердствовали с вашим текущим решением, но я не вынужден использовать тот же код, что и вы ..: P
Dennis98 28 сен. 2016, в 20:22
0

@ Dennis98: Достаточно справедливо. Просто из интереса, какой бит, по-твоему, переусердствовал?
Tim Down 29 сен. 2016, в 10:49
0

Извините за поздний ответ, был занят. : D Ну, твои дальнейшие проверки кажутся мне ненужными. Практически каждый браузер поддерживает .activeElement и я не вижу смысла проверять тип элемента, а также .selectionStart , который также поддерживается практически каждым браузером. Может быть, я забыл подумать о каком-то крайнем случае, но, по крайней мере, в моем расширенном тестовом примере ваш код не дает никакой выгоды по сравнению с моим; они работают точно так же: jsfiddle.net/6zoposby против jsfiddle.net/6zoposby/1
Dennis98 30 сен. 2016, в 16:11
0

@TimDown PS: я не хочу выглядеть как «я лучше тебя», и я не хочу раздражать тебя или что-то еще; извините, если бы это было так. : D Я просто хочу знать, почему вы делаете это по-другому, учиться или, может быть, даже указать что-то. Out / Make Sth. ясно, что вы не подумали .. ^^ РЕДАКТИРОВАТЬ: Почему вы выбрали .splice() вместо .substring кстати? Это быстрее? Оо
Dennis98 30 сен. 2016, в 16:11
1

@ Dennis98: я не раздражаюсь удаленно и не обижаюсь :) Проверка типов ввода происходит потому, что вы получаете предупреждения на консоли в Chrome, если вы пытаетесь получить доступ к selectionStart или selectionEnd в типе элемента <input> (например, «число») ), который не поддерживает его (см., например, jsfiddle.net/6zoposby/2 ). Я оставил проверку на существование selectionStart чтобы код не сломался в IE <= 8. Я допускаю, что проверка для activeElement , вероятно, сейчас избыточна. Я использую slice потому что он более мощный (хотя это не полезно здесь) и немного короче, чем substring .
Tim Down 30 сен. 2016, в 16:24
0

Хорошо знать! :) Но я бы сказал, что вы можете убрать проверку для selectionStart , мы уже договорились об удалении 2-й ветви из вашего первого кода в любом случае, что также было для совместимости с IE ниже v9 ..;)
Dennis98 30 сен. 2016, в 19:51
0

Привет ребят. Я хотел знать, смогу ли я добавить текст в начале и в конце выделения. Спасибо
Beraki 16 нояб. 2016, в 19:39
1

@beraki: Я определенно разместил код для этого где-то на SO раньше. Вы можете сделать это во входах и текстовых областях с помощью моего плагина jQuery ( github.com/timdown/rangyinputs ), а в обычном контенте (включая contenteditable) вы можете использовать stackoverflow.com/questions/17497661/… .
Tim Down 17 нояб. 2016, в 12:53
0

почему вы используете поля input ? Разве невозможно получить содержимое div ?
Anthony 09 нояб. 2017, в 00:14
0

@Anthony: Мой первоначальный ответ был только для получения выбора в обычном контенте, таком как div s. Затем кто-то запросил более общее решение, которое охватывает случаи, когда выбор находится внутри input или textarea , поэтому я согласился. Если вам это не нужно, вы можете просто использовать первую версию функции.
Tim Down 09 нояб. 2017, в 10:22

Показать ещё 25 комментариев

ParPar · Answer 2 · 2014-06-19T16-32-00.000Z

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

window.getSelection().toString()

и, конечно, специальная обработка для:

document.selection.createRange().htmlText

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

Andrew Kennedy · Answer 3 · 2012-03-20T21-38-00.000Z

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

window.getSelection().anchorNode.textContent.substring(
  window.getSelection().extentOffset, 
  window.getSelection().anchorOffset)