獲取文本選擇中的元素

Question

我想獲取用戶選擇中包含的所有元素（如在DOM 2範圍/ MS TextRanges中）。

/** @return {Array.<Element>} */ 
function getSelectedElements() { 

    var elements = []; 

    // get elements in the user selection somehow 

    return elements; 

} 

我試着按照蒂姆唐氏優秀solution to a similar question，有的萬盎司和MS文檔，有些PPK東西做到這一點。

該方法基本上是：

---

• 定義SelectionLikeObject作爲DOM選擇或IE選擇。

• 將RangeLikeObject定義爲DOM範圍或IE TextRange。

• 讓containerNode成爲節點。

• 讓containerElement成爲元素。

• 讓containedElements成爲NodeList。

• 讓elementRange成爲RangeLikeObject。

• 讓selectedRange成爲RangeLikeObject。

• 讓selectedElements成爲一個元素數組。

• 讓element成爲元素。

• 讓selection成爲SelectionLikeObject。

• 從用戶的選擇中設置selection。

• 將selectedElements設置爲新的數組。

• 對於每個selectedRange在selection：

  • 設置containerNode到的selectedRange共同祖先容器。

  • 將containerElement設置爲最接近的元素祖先到containerNode。

  • 將containedElements設置爲containerElement的後代列表。

  • 對於每個element在containedElements：

    • 從element設置elementRange。

    • 如果elementRange下降selectedRange的 邊界內的邊界：

      • 推element到selectedElements。

---

的DOM分支看起來是這樣的：

/** 
    @param {Document} doc 
    @return {Array.<Element>} 
*/ 
getSelectedElements.fromDOM = function (doc) { 

    /** @type {Range} */ 
    var selectedRange; 

    /** @type {Array.<Element>} */ 
    var selectedElements = []; 

    /** @type {Node} */ 
    var containerNode; 

    /** @type {Element} */ 
    var containerElement; 

    /** @type {NodeList} */ 
    var containedElements; 

    /** @type {Range} */ 
    var elementRange; 

    /** @type {Element} */ 
    var element; 

    /** @type {Selection} */ 
    var selection = doc.defaultView.getSelection(); 

    /** @type {number} */ 
    var rangeCount = selection.rangeCount; 

    /** @type {number} */ 
    var elementCount; 

    /** @type {number} */ 
    var i; 

    // hack for browsers without getRangeAt 
    // see http://www.quirksmode.org/dom/range_intro.html 

    if (!selection.getRangeAt) { 

    selection.getRangeAt = function (i) { 
     /** @type {Range} */ 
     var range = doc.createRange(); 
     if (i || !selection.anchorNode) { 
     return range; 
     } 
     range.setStart(selection.anchorNode, selection.anchorOffset); 
     range.setEnd(selection.focusNode, selection.focusOffset); 
     return range; 

    }; 

    selection.rangeCount = 1; 

    } 

    elementRange = doc.createRange(); 

    for (i = 0; i < rangeCount; ++i) { 

    selectedRange = selection.getRangeAt(i); 

    containerNode = selectedRange.commonAncestorContainer; 

    while (containerNode && containerNode.nodeType != 1) { 

     containerNode = containerNode.parentNode; 

    } 

    if (!containerNode) { 

     return selectedElements; // something went wrong... 

    } 

    containerElement = /** @type {Element} */ containerNode; 

    containedElements = containerElement.getElementsByTagName('*'); 

    elementCount = containedElements.length; 

    for (var i = 0; i < elementCount; ++i) { 

     element = containedElements[i]; 

     elementRange.selectNodeContents(element); 

     if (elementRange.compareBoundaryPoints(selectedRange.END_TO_START, selectedRange) < 1 && 
      elementRange.compareBoundaryPoints(selectedRange.START_TO_END, selectedRange) > -1) { 

     selectedElements.push(element); 

     } 
    } 
    } 

    elementRange.detach(); 

    return selectedElements; 

}; 

的IE分支看起來是這樣的：

/** 
    @param {Document} doc 
    @return {Array.<Element>} 
*/ 
getSelectedElements.fromIE = function (doc) { 

    // Selection - http://msdn.microsoft.com/en-us/library/ie/dd347133(v=vs.85).aspx 
    // TextRange - http://msdn.microsoft.com/en-us/library/dd347140(v=vs.85).aspx 
    // ControlRange - http://msdn.microsoft.com/en-us/library/ie/ms537447(v=vs.85).aspx 

    /** @type {TextRange|ControlRange} */ 
    var ieRange = doc.selection && doc.selection.createRange(); 

    /** @type {Array.<Element>} */ 
    var selectedElements = []; 

    /** @type {TextRange} */ 
    var selectedRange; 

    /** @type {Element} */ 
    var containerElement; 

    /** @type {NodeList} */ 
    var containedElements; 

    /** @type {TextRange} */ 
    var elementRange; 

    /** @type {Element} */ 
    var element; 

    /** @type {Selection} */ 
    var selection; 

    /** @type {number} */ 
    var i = -1; 


    if (ieRange.text === void 0) { 

    return []; // FIXME: It's a ControlRange, give up. 

    } 

    selectedRange = /** @type {TextRange} */ ieRange; 

    containerElement = selectedRange.parentElement(); 

    containedElements = containerElement.getElementsByTagName('*'); 

    elementRange = doc.body.createTextRange(); 

    while ((element = containedElements[++i])) { 

     elementRange.moveToElementText(element); 

     if (elementRange.compareEndPoints("StartToEnd", selectedRange) > -1 && 
      elementRange.compareEndPoints("EndToStart", selectedRange) < 1) { 

     selectedElements.push(element); 

     } 
    } 

    return /** @type {Array.<Element>} */ selectedElements; 

}; 

現在，我想要解決的問題是：如果只選擇元素中的部分文本，它將出現在返回的數組中，即使它僅爲partly selected。

我想添加一個參數，改變行爲只包含完全選定的元素。我有一種感覺，答案在於compareBoundaryPoints，我現在還不明白它的意義。另外，IE代碼目前尚未測試，但請讓我知道是否有任何東西看起來有問題（或DOM分支）。

Answer 1

經過一段時間的睡眠後再次讀到compareBoundaryPoints，我想我已經有了答案。

if (elementRange.compareBoundaryPoints(Range.START_TO_START, selectedRange) > -1 && 
    elementRange.compareBoundaryPoints(Range.END_TO_END, selectedRange) < 1) { 

這似乎只能評估到true爲用戶選擇中完全落元素。