javascript - ejemplos - innerhtml

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 puntero por favor?

Answer 1

En realidad, esto es bastante difícil de hacer porque hay que considerar seis casos:

1. La selección no está dentro de un párrafo (fácil);
2. La selección completa está dentro de un párrafo (fácil);
3. La selección completa cruza uno o más párrafos de 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, en primer lugar, debe decidir qué tan completa desea 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.

Edición: Mejor versión instalada, incluyendo mejor compatibilidad con el navegador.

Answer 2

He encontrado este example útil.

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

Answer 3

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

Answer 4

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

etiqueta y luego puede obtener el texto de ese nodo.

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

Asegúrate de mirar también window.getSelection (), ya que document.getSelection está depreciado en Firefox.

Answer 5

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