Решение с перекрывающимися текстовыми диапазонами.

Question

У меня есть следующая проблема, и я ищу подсказки, как это сделать с помощью ранги или родного объекта диапазона. У меня есть элемент div, содержащий следующий текст: "Это пример текста". Из сервиса я получил этот пример json response. [{ start: 0, end: 10}, {start: 2, end: 8}] Я хочу добавить интервалы, которые помечают текст от 0 до 10 и от 2 до 8. Поэтому необходимо добавить второй интервал - от 2 до 8 с отклонением уже добавленного промежутка.

С наилучшими пожеланиями.

Answer 1

Rangy 1.3 имеет простое получение и настройку символов в ядре с помощью getBookmark() а также moveToBookmark() методы Range. Как только у вас есть диапазон, вы можете разделить текстовые узлы на границах диапазона, получить все текстовые узлы в диапазоне, используя 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);