如何查找 HTML 是否包含在所选文本中

How to find if a HTMLElement is enclosed in Selected text

本文关键字：包含 文本 是否 HTML 何查找 查找      更新时间：2023-09-26

是否可以找出一个HTML环境是否完全包含在选择中？我有一个场景，用户在 HTML 编辑器中选择一些文本并从列表中应用一些自定义样式。现在，我需要更改包含在该选择中的每个 span 元素的 class 属性，并用具有所选样式的新 span 包围该选择。我能够在Firefox和safari中使用DOM Range的compareBoundaryPoints方法找出特定的span元素是否在选择中，但它不适用于IE。

有没有办法找出一个元素是否完全包含在IE的选定范围内？

谢谢

卡皮尔

正如@standardModel所说，Rangy在IE中为您提供了完整的* DOM Range支持，并且有一个有用的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
}

如果您不想使用像 Rangy 这样笨重的东西，以下函数将告诉您是否完全选择了元素：

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 突变下的范围更新

你可能想看看Rangy。这使得xbrowser范围和选择变得更加容易。

相关文章：