Выделите текст на основе индекса в textContent

Баунти поступит в самое быстрое решение, как продемонстрировано jsPerf, в последних версиях Firefox, Chrome и Internet Explorer во время тестирования или ответ, наиболее полезный при создании такого решения по моему усмотрению. Mwahahaha!

Я буду в основном удовлетворен решением, которое берет все смещения s и необработанный <span> и добавляет выделение к этому, так что parent.textContent = parent.textContent за которым следует выполнение решения в обновленном списке смещений, будет повторное выделение, но это имеет неблагоприятную временную сложность, поэтому не является предпочтительным.

Связанные вопросы

У меня есть элемент, содержащий только текст, который я хотел бы выделить. У меня также есть массив [startline, startcol, endline, endcol] который, зная длины каждой строки из .textContent, я могу нормализовать [startoffset, endoffset]. Как я могу выделить между каждой парой смещений s?

Определения

MCVE

Ответы

Ответ 1

Сделайте нормализацию для начала/окончания позиций, чтобы избежать перекрытия.

Объединить начальные и конечные позиции в один список с противоположными значениями (например, -1 и 1)
Сортировка списка по положению, а затем - по значению маркера (и на основе сортировки второго уровня вы можете либо различать последовательные диапазоны, либо объединять их)
пройдите список позиций и добавьте маркер текущей позиции в текущую сумму; как только он "0" - это означает, что вы только что нашли окончание для некоторых наборов вложенных/пересекающихся разделов;

Таким образом вы получите позиции для выделения без вложенных/перекрывающихся диапазонов.

Чтобы заменить текстовый узел на сочетание текстовых узлов и элементов HTML (например, <span>), documentFragment и .replaceChild() помогут:

let starts = [
    5,  44, 0, 50, 6,  100, 99,  50, 51, 52
];
let ends = [
    20, 62, 4, 70, 10, 100, 101, 54, 53, 53
];

let positions = [];
let normalizedPositions = [];
starts.forEach(function(position) {
    positions.push({position, value: 1});
});
ends.forEach(function(position) {
    positions.push({position, value: -1});
});
positions = positions.sort(function(a, b) {
    return a.position - b.position || 
        b.value - a.value
});

var currentSection = {from: 0, counter: 0};

for(position of positions) {
    if (!currentSection.counter) {
        if (position.value === -1) {
            throw 'inconsistent boundaries: closing before opening ${position.position}';
        }
        currentSection.from = position.position;  
    }
    currentSection.counter += position.value;

    if (!currentSection.counter) { 
        normalizedPositions.push({
            from: currentSection.from, 
            to: position.position
        });
    }
}
if (currentSection.counter) {
    throw "last section has not been closed properly";   
}


let parentNode = document.querySelector('p');
let textNodeToReplace = parentNode.childNodes[0];
let sourceText = textNodeToReplace.nodeValue;

let documentFragment = document.createDocumentFragment();
let withoutHighlightingStart = 0;

normalizedPositions.forEach(function (highlightRange) {
    if (highlightRange.from> withoutHighlightingStart) {
      let notHighlighted = createTextNode(sourceText.slice(withoutHighlightingStart, highlightRange.from));
      documentFragment.appendChild(notHighlighted);
    }
    let highlighted = createHighlighted(sourceText.slice(highlightRange.from, highlightRange.to));
    documentFragment.appendChild(highlighted);
    withoutHighlightingStart = highlightRange.to;
});
let lastNotHighlighted = createTextNode(sourceText.slice(withoutHighlightingStart));
documentFragment.appendChild(lastNotHighlighted);

parentNode.replaceChild(documentFragment, textNodeToReplace);

function createTextNode(str) {
   return document.createTextNode(str);
}

function createHighlighted(str) {
   let span = document.createElement('span');
   span.classList.add('highlight');
   span.appendChild(createTextNode(str));
   return span;
}

.highlight {
    background-color: yellow;
    color: dark-blue;
}