Obtener el elemento principal de un texto seleccionado

¿Es posible obtener el elemento principal de un texto seleccionado en la página? Por ejemplo:

<div class="someparent">

Selection of this text should refer to the 'someparent' class.

<span class="spanparent">If this is selected, the parent should be this span</span>

</div>

Porque al obtener el texto seleccionado, normalmente lo obtiene de la ventana o del documento (según el navegador), pero ¿es posible obtener el elemento principal del texto seleccionado?

preguntado el 27 de agosto de 11 a las 15:08

Puedes refrasear eso. No puedo conseguir lo que necesitas. -

Si desea obtener el div someparent cuando se selecciona el texto dentro de spanparent, puede usar $ ('span.spanparent'). Select (function () {$ (this) .parent (); ...}); -

@Boo: Esa debería ser una respuesta :) -

@Boo: no parece funcionar, no estoy recuperando texto de un campo de entrada, necesito obtener el padre del texto seleccionado en un elemento típico (no entradas). -

3 Respuestas

Aquí hay una función que le proporcionará el elemento más interno que contiene la totalidad de la selección de usuario en todos los navegadores principales (excepto cuando se seleccionan varios rangos, que solo es compatible con Firefox. Si esto es importante, puedo expandir el ejemplo para tratar con ese caso también):

function getSelectionParentElement() {
    var parentEl = null, sel;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            parentEl = sel.getRangeAt(0).commonAncestorContainer;
            if (parentEl.nodeType != 1) {
                parentEl = parentEl.parentNode;
            }
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        parentEl = sel.createRange().parentElement();
    }
    return parentEl;
}

Respondido 01 Jul 13, 12:07

Supongamos que seleccioné el texto de otro nodo que ¿cómo obtener todos los padres? - Ravi

Cómo obtener la identificación del padre si el elemento es span - Ravi

solo para completar la respuesta, parentEl.tagName da la etiqueta adjunta. - joey rohan

¿Por qué es necesario else if ((sel = document.selection) && sel.type! = "Control")? - Daniel

@Daniel: No lo es si no necesita preocuparse por Internet Explorer. - Tim Down

Sugeriría usar esto

window.getSelection().anchorNode.parentElement

He probado en safari osx 10.9

respondido 08 nov., 17:20

-1, cuando se realiza la selección i, se pueden seleccionar muchos nodos juntos y anchorNode o focusNode cualquiera de ellos puede ser más alto en el árbol DOM (dependiendo de la dirección y longitud de la selección). Uno debería obtener un padre que cubra tanto anchorNode como focusNode. - p_champ

@Tim Down's La respuesta funciona bien, para agregar un código más útil para llegar al contenido html del padre específico:

function getSelectionParentElement() {
  var parentEl = null, sel;
  if (window.getSelection) {
      sel = window.getSelection();
      if (sel.rangeCount) {
          parentEl = sel.getRangeAt(0).commonAncestorContainer;
          if (parentEl.nodeType != 1) {
              parentEl = parentEl.parentNode;
          }
      }
  } else if ( (sel = document.selection) && sel.type != "Control") {
      parentEl = sel.createRange().parentElement();
  }
  while(true){
      // I want to reach upper <span> parent
      if(parentEl.nodeName == "SPAN"){
          console.log(parentEl);
          break;
      }
      else{
          parentEl = parentEl.parentNode;
      }
  }
}

Por ejemplo:

function getSelectionParentElement() {
      var parentEl = null, sel;
      if (window.getSelection) {
          sel = window.getSelection();
          if (sel.rangeCount) {
              parentEl = sel.getRangeAt(0).commonAncestorContainer;
              if (parentEl.nodeType != 1) {
                  parentEl = parentEl.parentNode;
              }
          }
      } else if ( (sel = document.selection) && sel.type != "Control") {
          parentEl = sel.createRange().parentElement();
      }
      while(true){
          // I want to reach upper <span> parent
          if(parentEl.nodeName == "P"){
              document.getElementById("printable").innerText = parentEl.innerHTML;
              break;
          }
          else{
              parentEl = parentEl.parentNode;
          }
      }
    }
<head>
    <style type="text/css">
    @media print
    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style>
</head>

<p>The <strong>coronavirus</strong> COVID-19 is affecting <strong>210 <i>countries</i> and territories</strong> around the world and 2 international conveyances.</p>

<div id="printable">Output: </div>
<button onclick="getSelectionParentElement()">Select 'countries' and click me.</button>

Respondido 21 Abr '20, 10:04

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.