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

Question

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

23

在突出显示文本之后，我想获得包含所选文本的段落。

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

请问有什么指导意见吗？

- Lilz

7个回答

6

我发现这个示例很有用。

看起来有些浏览器支持window.getSelection()，而其他浏览器则支持document.getSelection()。此示例处理了所有这些情况。

- Nadia Alramli

谢谢，但是我该如何获取整个段落，即使他们只选择了一些单词？ - Lilz

4

select.anchorNode.parentNode will return the parent node, in your case the

tag and you can then get the text of that node.

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

Make sure you look at window.getSelection() as well since document.getSelection is depreciated in firefox.

- James Avery

3

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

- Voinea Ionut

1

一个新项目从jsmatita诞生： http://takenotes.sourceforge.net/ （它是用意大利语编写的）

- TakeNotes

0

我重新制作了来自@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>

- Jürgen Fink

-1

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

- Thiago Souza

我重现了你的代码：parent 返回 null :-( - Jürgen Fink

如果你这样做：window.onload = getSelectedParagraph();，你将始终得到null。那是因为在页面加载时你还没有选择任何内容。 - Thiago Souza

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cletus · Accepted Answer

实际上，这很难做，因为您必须考虑六种情况：

选择不在段落内（简单）；
整个选择都在一个段落中（简单）；
整个选择跨越了一个或多个同级段落（更难）；
选择的开头或结尾不在段落内的元素中（更难）；
跨度的段落处于不同的级别，例如一个位于列表项中，而另外两个是列表项的同级（更加困难）；以及
以上情况的某些组合。

因此，首先您必须决定要解决的问题有多完整。我只会涵盖最简单的情况（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;
  }
}

注意：如果您需要替换标签和文本，使用innerHTML代替textContent。

编辑：更新了更好的代码版本，增强了浏览器兼容性。