有沒有辦法獲取選定區域的底層HTML代碼？

Question

我爲我們的網站編寫的內容管理系統使用小書籤發佈文章，它使用document.getSelection（）讀取頁面上的選定區域。但是在某些情況下，讀取選定區域的底層HTML代碼以獲取鏈接和其他HTML格式也將非常有用。

任何人都知道一個jQuery插件或其他Javascript技術來訪問生成選定區域的原始HTML？

Answer 1

首先，正如你所說的，得到selection

var sel = document.getSelection(); 

這確實有關於選擇的節點，太一些細節，但如果你想要做更多，然後將其轉換爲一個range（如果.rangeCount > 1您可能希望循環這裏）

var range = sel.getRangeAt(0); 

接下來，使用range.commonAncestorContainer和range.startContainer穿行DOM樹進行任何你想要的，直到你達到range.endContainer。
所有這些節點都應該在選擇中。

---

下面是一些代碼，將返回所有（頂層）選擇的節點和可選，適用回調每節點的選擇。

function selectedNodes(callback, context) { 
    var sel = document.getSelection(), 
     range = sel.getRangeAt(0), 
     indices = [], 
     nextNode = function nextNode(e) { 
      if (e.childNodes.length > 0) return e.childNodes[0]; 
      while(!e.nextSibling && e.parentNode) e = e.parentNode; 
      return e.nextSibling; 
     }, 
     e = range.startContainer; 
    if (callback) { 
     callback.call(context, e); 
     while(e !== range.endContainer) { 
      e = nextNode(e); 
      callback.call(context, e); 
     } 
     e = range.startContainer; 
    } 
    if (e === range.commonAncestorContainer) return [e]; 
    else { 
     while (e !== range.commonAncestorContainer) { 
      indices[0] = Array.prototype.indexOf.call(e.parentNode.childNodes, e); 
      e = e.parentNode; 
     } 
     e = range.endContainer; 
     while (e !== range.commonAncestorContainer) { 
      indices[1] = Array.prototype.indexOf.call(e.parentNode.childNodes, e); 
      e = e.parentNode; 
     } 
     return Array.prototype.slice.call(e.childNodes, indices[0], indices[1]+1); 
    } 
} 

/* 
selectedNodes(console.log, console); 
node1 
.. 
nodeN 
[node1, .., nodeM] // only top-level 
*/