Wie bekomme ich das DOM-Element, das die aktuelle Auswahl enthält?

Question

Sie können einen Teil einer Webseite mit der Maus auswählen.

Ich weiß, dass ich die currently selected text bekommen kann, aber wie bekomme ich das DOM-Element, das den Anfang oder das Ende der aktuellen Auswahl enthält?

Answer 1

Verwenden Sie in IE document.selection.createRange(). ParentElement() und verwenden Sie in echten Browsern window.getSelection(). GetRangeAt (0) .startContainer.parentNode. Etwas wie folgt aus:

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

Im Folgenden wird der Behälter Element der Anfang oder das Ende Grenze der aktuellen Auswahl zurückkehren, die boolean isStart mit angeben, ob Sie den Anfang oder das Ende Grenze wollen. Es wird in den meisten gängigen Browsern funktionieren. Fügen Sie Funktionstests für mehr Robustheit hinzu.

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; 
     } 
    } 
}