Jak mogę uzyskać element DOM, który zawiera bieżący wybór?

Question

Możesz wybrać część strony internetowej za pomocą myszy.

Wiem, że mogę uzyskać currently selected text, ale jak mogę uzyskać element DOM, który zawiera początek lub koniec bieżącego zaznaczenia?

Answer 1

W IE, użyj document.selection.createRange(). ParentElement() iw prawdziwych przeglądarkach użyj window.getSelection(). GetRangeAt (0) .startContainer.parentNode. Coś takiego:

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

Poniższa powróci element pojemnik z początku lub końca granicy bieżącego zaznaczenia, używając logiczną isStart, aby określić, czy chcesz granicę początkową lub końcową. Będzie działać w większości popularnych przeglądarek. Dodaj testy funkcji, aby uzyskać większą niezawodność.

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