如何查找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是否包含在选定文本中

回答

相关问题