JavaScript для получения абзаца выделенного текста на веб-странице

Question

После выделения текста я хотел бы получить абзац, в котором находится выделенный текст.

var select = window._content.document.getSelection();

Любые указатели, пожалуйста?

Answer 1

Это на самом деле довольно сложно сделать, потому что вам нужно рассмотреть шесть случаев:

1. Выбор не в абзаце (легко);
2. Весь выбор в пределах одного абзаца (легко);
3. Весь выбор пересекает один или несколько пунктов одного брата (сложнее);
4. Выбор начинается или заканчивается в элементе, не входящем в абзац (сложнее);
5. Составленные абзацы находятся на разных уровнях, например, один находится внутри элемента списка, в то время как два других являются родственными элементами списка (еще сложнее); и
6. Некоторая комбинация вышеперечисленного.

Итак, сначала вы должны решить, насколько полно вы хотите, чтобы решение было. Я рассмотрю только самые простые случаи (1) и (2).

function getSelectedParagraphText() {
  if (window.getSelection) {
      selection = window.getSelection();
  } else if (document.selection) {
      selection = document.selection.createRange();
  }
  var parent = selection.anchorNode;
  while (parent != null && parent.localName != "P") {
    parent = parent.parentNode;
  }
  if (parent == null) {
    return "";
  } else {
    return parent.innerText || parent.textContent;
  }
}

Примечание: Если вам нужны теги, замените textContent на innerHTML.

Редактировать: Добавлена ​​улучшенная версия, включая лучшую совместимость с браузером.

Answer 2

Я нашел этот полезный пример .

Кажется, что некоторые браузеры поддерживают window.getSelection (), а другие поддерживают document.getSelection (). Пример обрабатывает все эти случаи.

Answer 3

select.anchorNode.parentNode вернет родительский узел, в вашем случае тег

, и вы сможете получить текст этого узла.

var x = window.getSelection() 
var z = x.anchorNode.parentNode
alert(z.innerHTML)

Убедитесь, что вы смотрите на window.getSelection (), так как document.getSelection устарела в firefox.

Answer 4

$.event.props.push('onTextSelect');
$(document).click(function(){
    var str=window.getSelection().anchorNode.data;
    var str=str.substring(window.getSelection().anchorOffset,window.getSelection().focusOffset);
    if(str)
        $(window.getSelection().focusNode.parentNode).trigger({type:'onTextSelect',text:str});
});

$('p').on('onTextSelect',function(e){
    console.log($(this).attr('class'))
    $('p:last').text(e.text);
});

HTML

<div><p class="p">some text</p></div>
<p></p>

Вы можете найти скрипку здесь https://jsfiddle.net/q9nkc0fd/6/

Answer 5

Новый проект родился от jsmatita: http://takenotes.sourceforge.net/ (на итальянском языке)