Javascript, чтобы получить абзац выбранного текста на веб-странице

Ответ 1

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

• Выбор не находится в абзаце (легко);
• Весь выбор находится в пределах одного абзаца (легко);
• Весь выбор пересекает один или несколько абзацев (более сложный);
• Выбор начинается или заканчивается элементом, не содержащимся в абзаце (более сложным);
• Пункты, охватываемые на разных уровнях, например, один находится в элементе списка, а два других являются братьями и сестрами из списка (еще сложнее); и
• Некоторая комбинация из вышеперечисленного.

Итак, во-первых, вам нужно решить, насколько полно вы хотите, чтобы решение было. Я расскажу только простейшие случаи (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.

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

Ответ 2

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

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

Ответ 3

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

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

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

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

Ответ 4

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

Ответ 5

$.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/