javascript para obter parágrafo do texto selecionado na página web

Question

Depois de destacar texto, gostaria de obter o parágrafo no qual reside o texto selecionado.

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

Os ponteiros agradar?

Answer 1

Este é realmente um pouco difícil de fazer, porque você tem que considerar seis casos:

1. A seleção não é dentro de um parágrafo (fácil);
2. a seleção inteira está dentro de um parágrafo (fácil);
3. a seleção inteira atravessa um ou mais parágrafos irmão (mais difícil);
4. Os começos de seleção ou extremidades em um elemento não dentro de um parágrafo (mais difícil);
5. Os parágrafos mediram estão em níveis diferentes, por exemplo, um está dentro de um item da lista, enquanto os outros dois são irmãos da lista (ainda mais); e
6. Alguns combinação dos anteriores.

Assim, em primeiro lugar você tem que decidir como completo que você deseja que a solução seja. Eu só vou cobrir os casos mais simples de (1) e (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;
  }
}

Nota:. Se você é depois de muito etiquetas substituir textContent com innerHTML

Editar:. Melhor versão put in, incluindo melhor compatibilidade do navegador

Answer 2

Eu encontrei este útil exemplo .

Parece que alguns navegadores suportam window.getSelection (), enquanto outros suportar document.getSelection (). O exemplo pega todos esses casos.

Answer 3

select.anchorNode.parentNode irá retornar o nó pai, no seu caso o

tag

e então você pode obter o texto desse nó.

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

Certifique-se de olhar para window.getSelection () também desde document.getSelection é depreciado no 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>

Você pode encontrar o violino aqui https://jsfiddle.net/q9nkc0fd/6/

Answer 5

Um novo projecto nasce de jsmatita: http://takenotes.sourceforge.net/ (É em língua italiana)