javascript - 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/ （它是意大利语）

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