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

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

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

какие-нибудь советы, пожалуйста?

17
document javascript paragraph webpage window

5 ответов

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

  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.

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

18

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

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

5

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

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

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

убедитесь, что вы смотрите в окно.getSelection (), а также с документа.getSelection амортизируется в firefox.

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/

2

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

1