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

我发现这很有用example。

似乎有些浏览器支持 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/ （是意大利语）

Answer 6

我从@Thiago Souza 的上述答案中复制了代码，并为此创建了一个 sn-p，供那些可以提供正确答案的人使用。

function getSelectedParagraph(){
  const selection = window.getSelection();
  let parent = selection.anchorNode;

  while (parent != null && parent.nodeName != "P") {
    parent = parent.parentNode;
  };

  console.log(parent);

  return parent;
};

window.onload = getSelectedParagraph();

<div class='paragraph-container'>
  <p id='paragraph-01'>
    Paragraph 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p id='paragraph-02'>
    Paragraph 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p id='paragraph-03'>
    Paragraph 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

Answer 7

function getSelectedParagraph(){
      
      const selection = window.getSelection();
    
      let parent = selection.anchorNode;
                    
      while (parent != null && parent.nodeName != "P") {
          parent = parent.parentNode;
      }
                  
      return parent;
      
    }