¿Cómo puedo obtener el elemento DOM que contiene la selección actual?

Question

Puede seleccionar una parte de una página web con el mouse.

Sé que puedo obtener el currently selected text, pero ¿cómo puedo obtener el elemento DOM que contiene el inicio o el final de la selección actual?

Answer 1

En IE, use document.selection.createRange(). ParentElement() y en navegadores reales use window.getSelection(). GetRangeAt (0) .startContainer.parentNode. Algo como esto:

function getSelectedNode() 
{ 
    if (document.selection) 
     return document.selection.createRange().parentElement(); 
    else 
    { 
     var selection = window.getSelection(); 
     if (selection.rangeCount > 0) 
      return selection.getRangeAt(0).startContainer.parentNode; 
    } 
} 

Answer 2

El siguiente devolverá el elemento contenedor de inicio o al final límite de la selección actual, usando el booleano isStart para especificar si desea que el límite de inicio o al final. Funcionará en la mayoría de los navegadores convencionales. Agregue pruebas de características para mayor robustez.

function getSelectionBoundaryElement(isStart) { 
    var range, sel, container; 
    if (document.selection) { 
     range = document.selection.createRange(); 
     range.collapse(isStart); 
     return range.parentElement(); 
    } else { 
     sel = window.getSelection(); 
     if (sel.getRangeAt) { 
      if (sel.rangeCount > 0) { 
       range = sel.getRangeAt(0); 
      } 
     } else { 
      // Old WebKit 
      range = document.createRange(); 
      range.setStart(sel.anchorNode, sel.anchorOffset); 
      range.setEnd(sel.focusNode, sel.focusOffset); 

      // Handle the case when the selection was selected backwards (from the end to the start in the document) 
      if (range.collapsed !== sel.isCollapsed) { 
       range.setStart(sel.focusNode, sel.focusOffset); 
       range.setEnd(sel.anchorNode, sel.anchorOffset); 
      } 
     } 

     if (range) { 
      container = range[isStart ? "startContainer" : "endContainer"]; 

      // Check if the container is a text node and return its parent if so 
      return container.nodeType === 3 ? container.parentNode : container; 
     } 
    } 
}