如何查找HTMLElement是否包含在選定文本中

是否有可能找出HTMLElement是否完全包含在選擇內？我有一個場景，用戶在HTML編輯器中選擇一些文本，並從列表中應用一些自定義樣式。現在，我需要更改所選內容中包含的每個span元素的class屬性，並使用所選樣式的新跨度圍繞選區。能夠通過在Firefox和safari中使用DOM Range的compareBoundaryPoints方法來找出特定的span元素是否處於選中狀態，但它不適用於IE。如何查找HTMLElement是否包含在選定文本中

有沒有什麼方法可以找出一個元素是否被全部封閉在IE的選定範圍內？

感謝

卡皮爾

來源

2011-05-04 Kapil Gupta

由於@standardModel說，瘦長讓你在IE全* DOM範圍的支持，並有一個有用的方法getNodes()，您可以使用：

var sel = rangy.getSelection(); 
if (sel.rangeCount) { 
    var range = sel.getRangeAt(0); 
    var spans = range.getNodes([1], function(node) { 
     return node.nodeName.toLowerCase() == "span" && range.containsNode(node); 
    }); 

    // Do stuff with spans here 
}

如果你不想使用笨重的東西瘦長，下面的函數會告訴你，如果一個元素被完全選擇：

function isSelected(el) { 
    if (window.getSelection) { 
     var sel = window.getSelection(); 
     var elRange = document.createRange(); 
     elRange.selectNodeContents(el); 
     for (var i = 0, range; i < sel.rangeCount; ++i) { 
      range = sel.getRangeAt(i); 
      if (range.compareBoundaryPoints(range.START_TO_START, elRange) <= 0 
        && range.compareBoundaryPoints(range.END_TO_END, elRange) >= 0) { 
       return true; 
      } 
     } 
    } else if (document.selection && document.selection.type == "Text") { 
     var textRange = document.selection.createRange(); 
     var elTextRange = textRange.duplicate(); 
     elTextRange.moveToElementText(el); 
     return textRange.inRange(elTextRange); 
    } 
    return false; 
}

的jsfiddle例如：http://jsfiddle.net/54eGr/1/

（*）除了處理DOM突變下的範圍更新

來源

2011-05-04 15:32:18

感謝您的回覆Tim。我不能使用Rangy，但您的解決方案對我來說工作得很好。謝謝 – 2011-05-05 05:31:44

你可能想看看Rangy。這使xbrowser範圍和選擇更容易。

來源

2011-05-04 13:40:53 standardModel

具體來說，CSS類applier模塊可能對此有所幫助：http://code.google.com/p/rangy/wiki/CSSClassApplierModule – 2011-05-04 15:02:04

如何查找HTMLElement是否包含在選定文本中

回答

相關問題