跨浏览器选择范围库？

Question

有谁知道用javascript编写的任何跨浏览器用户选择范围库？

我发现了一些jQuery插件,(坦率地说,这些插件过于局限且非常多).

我想知道你在那里发现了什么.不要再向我发送谷歌搜索,(我花了几天时间研究这一切).希望这可以成为未来程序员可以找到答案的地方.

Answer 1

我开发了一个名为Rangy的跨浏览器范围和选择库.它的核心在概念上与IERange没有什么不同,但在DOM 2级Range和HTML5选择规范的实现方面,以及浏览器错误的稳定性和变通方面方面都超越了它.我认为这是最好的.

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

https://github.com/timdown/rangy

下面使用Ranges的一些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);