JavaScript para obtener el párrafo del texto seleccionado en la página web

Question

Después de resaltar el texto, me gustaría obtener el párrafo en el que reside el texto seleccionado.

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

¿Algún indicador por favor?

Answer 1

Esto es bastante difícil de hacer porque debes considerar seis casos:

1. La selección no está dentro de un párrafo (fácil);
2. Toda la selección está dentro de un párrafo (fácil);
3. Toda la selección cruza uno o más párrafos hermanos (más difícil);
4. La selección comienza o termina en un elemento que no está dentro de un párrafo (más difícil);
5. Los párrafos abarcados están en diferentes niveles, por ejemplo, uno está dentro de un elemento de la lista, mientras que otros dos son hermanos de la lista (aún más difícil); y
6. Alguna combinación de lo anterior.

Entonces, primero debes decidir qué tan completa quieres que sea la solución. Solo cubriré los casos más simples de (1) y (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: si también busca etiquetas, reemplace textContent con innerHTML.

Editar: Se mejoró la versión, incluida una mejor compatibilidad del navegador.

Answer 2

Encontré este útil ejemplo .

Parece que algunos navegadores admiten window.getSelection () mientras que otros admiten document.getSelection (). El ejemplo maneja todos estos casos.

Answer 3

select.anchorNode.parentNode devolverá el nodo principal, en su caso, la etiqueta

y luego podrá obtener el texto de ese nodo.

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

Asegúrese de mirar también window.getSelection () ya que document.getSelection se deprecia en 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>

Puede encontrar el violín aquí https://jsfiddle.net/q9nkc0fd/6/

Answer 5

Un nuevo proyecto nace de jsmatita: http://takenotes.sourceforge.net/ (está en idioma italiano)