Question

我有一个以下问题，并寻找提示如何使用 rangy或本机范围对象。我有包含以下内容的div元素文本：＆＃34;这是示例文本。＆＃34; 从服务我收到这个例子json响应。 [{start：0，end：10}，{start：2，end：8}] 我想添加标记0到10和2到8的文本的跨度。因此，必须添加第二个跨度 - 从2到8，并且已经添加了跨度。

祝你好运。

Answer 1

Rangy 1.3通过Range的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);

重叠文本范围的解决方案。

1 个答案: