Làm cách nào để có được phần tử DOM có chứa lựa chọn hiện tại?

Question

Bạn có thể chọn một phần của trang web bằng chuột.

Tôi biết rằng tôi có thể nhận được currently selected text nhưng làm cách nào tôi có thể nhận được phần tử DOM chứa phần bắt đầu hoặc kết thúc của lựa chọn hiện tại?

Answer 1

Trong IE, sử dụng document.selection.createRange(). ParentElement() và trong các trình duyệt thực sử dụng window.getSelection(). GetRangeAt (0) .startContainer.parentNode. Một cái gì đó như thế này:

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

Sau đây sẽ trở lại với yếu tố container của đầu hoặc cuối ranh giới của vùng chọn hiện tại, sử dụng boolean isStart để xác định xem bạn có muốn bắt đầu hoặc kết thúc ranh giới. Nó sẽ làm việc trong hầu hết các trình duyệt chính thống. Thêm các tính năng thử nghiệm để tăng cường độ bền.

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