跨浏览器选择范围库?

我开发了一个跨浏览器范围和选择库,名为 Rangy . 它的核心在概念上与iRange没有什么不同,但在DOM级别2范围和HTML5选择规范的实现方面,以及在稳定性和浏览器缺陷的解决方法方面,它超越了iRange。我认为这是最好的。

还有一些额外的模块用于保存、恢复和序列化选择,以及将CSS类应用于范围和选择。

https://github.com/timdown/rangy

下面使用一些范围的Rangy扩展来轻松地迭代选择中的文本节点并围绕每个节点:

function surroundSelectedText(templateElement){
    var range, sel = rangy.getSelection();
    var ranges = sel.getAllRanges();
    var textNodes, textNode, el, i, len, j, jLen;
    for (i = 0, len = ranges.length; i < len; ++i) {
        range = ranges[i];
        // If one or both of the range boundaries falls in the middle
        // of a text node, the following line splits the text node at the
        // boundary
        range.splitBoundaries();

        // The first parameter below is an array of valid nodeTypes
        // (in this case, text nodes only)
        textNodes = range.getNodes([3]);

        for (j = 0, jLen = textNodes.length; j < jLen; ++j) {
            textNode = textNodes[j];
            el = templateElement.cloneNode(false);
            textNode.parentNode.insertBefore(el, textNode);
            el.appendChild(textNode);
        }
    }
}

var span = document.createElement("span");
span.style.color = "green";
span.style.fontWeight = "bold";

surroundSelectedText(span);

对于jQuery插件选项jCaret,您可以查看 homepage here 以及 examples here .

我已经在各种应用程序的一些项目中使用了它,可以很好地消除跨浏览器的不一致性。

ierange . 尝试在IE中实现其他浏览器支持的标准DOM级别2范围模型。