Highlighting string at multiple occurrences

Question

I'm currently implementing a substring search. From the algorithm, I get array of substrings occurence positions where each element is in the form of [startPos, endPos].

For example (in javascript array):

[[1,3], [8,10], [15,18]]

And the string to highlight is:

ACGATCGATCGGATCGAGCGATCGAGCGATCGAT

I want to highlight (in HTML using <b>) the original string, so it will highlight or bold the string from position 1 to 3, then 8 to 10, then 15 to 18, etc (0-indexed).

A<b>CGA</b>TCGA<b>TCG</b>GATC<b>GAGC</b>GATCGAGCGATCGAT

This is what I have tried (JavaScript):

function hilightAtPositions(text, posArray) {

    var startPos, endPos;

    var startTag = "<b>";
    var endTag   = "</b>";
    var hilightedText = "";

    for (var i = 0; i < posArray.length; i++) {
        startPos = posArray[i][0];
        endPos   = posArray[i][1];

        hilightedText = [text.slice(0, startPos), startTag, text.slice(startPos, endPos), endTag, text.slice(endPos)].join(''); 
    }

    return hilightedText;
}

But it highlights just a range from the posArray (and I know it is still incorrect yet). So, how can I highlight a string given multiple occurrences position?

Answer 1

Looking at this question, and following John3136's suggestion of going from tail to head, you could do:

String.prototype.splice = function( idx, rem, s ) {
    return (this.slice(0,idx) + s + this.slice(idx + Math.abs(rem)));
};

function hilightAtPositions(text, posArray) {
    var startPos, endPos;
    posArray = posArray.sort(function(a,b){ return a[0] - b[0];});

    for (var i = posArray.length-1; i >= 0; i--) {
        startPos = posArray[i][0];
        endPos   = posArray[i][1];
        text= text.splice(endPos, 0, "</b>"); 
        text= text.splice(startPos, 0, "<b>"); 
    }
    return text;
}

Note that in your code, you are overwriting hilightedText with each iteration, losing your changes.