javascript - 具有重叠文本范围的解决方案。

Question

我有以下问题，正在寻找如何解决这个问题的提示范围或本地范围对象。我有包含以下内容的 div 元素文本: “这是示例文本。”从服务中我收到了这个示例 json 响应。[{开始:0，结束:10}，{开始:2，结束:8}]我想添加标记文本从 0 到 10 和从 2 到 8 的跨度。因此，必须添加第二个跨度 - 从 2 到 8，并与已添加的跨度有偏差。

最好的问候。

Answer 1

Rangy 1.3 通过getBookmark() 在核心中具有简单的基于字符偏移量的获取和设置|和 moveToBookmark()范围的方法。有了范围后，您可以在范围边界处拆分文本节点，使用 getNodes() 获取该范围内的所有文本节点，然后将每个文本节点依次包围在一个范围内。

演示:http://jsfiddle.net/mL0jz0xg/

代码:

function highlightCharacterRange(el, start, end) {
    var range = rangy.createRange();
    range.moveToBookmark({
        containerNode: el,
        start: start,
        end: end
    });
    range.splitBoundaries();
    var textNodes = range.getNodes([3]);
    for (var i = 0, textNode, span; textNode = textNodes[i++]; ) {
        span = document.createElement("span");
        span.className = "highlight";
        textNode.parentNode.insertBefore(span, textNode);
        span.appendChild(textNode);
    }
}

var container = document.getElementById("container");
highlightCharacterRange(container, 0, 10);
highlightCharacterRange(container, 2, 8);
highlightCharacterRange(container, 7, 14);