Question

在突出显示文本后，我想获取所选文本所在的段落。

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

请指点什么？

Answer 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。

编辑：提供更好的版本，包括更好的浏览器兼容性。

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（），因为在Firefox中折旧了document.getSelection。

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 的上述答案中复制了代码，并为此目的创建了一个片段，供那些可以提供正确答案的人使用。

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;
      
    }

javascript获取网页中所选文本的段落

7 个答案: