javascript - Webページで選択したテキストの段落を取得するためのjavascript

Question

テキストを強調表示した後、選択したテキストが存在する段落を取得したいと思います。

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

何かポインタをお願いしますか？

Answer 1

次の6つのケースを考慮する必要があるため、これを行うのは実際にはかなり困難です。

1. 選択は段落内にありません（簡単）。
2. 選択全体が1つの段落内にあります（簡単）。
3. 選択全体が1つ以上の兄弟段落と交差します（より困難）。
4. 選択は、段落内にない要素で開始または終了します（より難しい）。
5. スパンされた段落はさまざまなレベルにあります。たとえば、1つはリスト項目内にあり、他の2つはリストの兄弟です（さらに難しい）。と
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)

document.getSelectionはfirefoxで減価償却されるため、window.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;
      
    }