Wrap Text in span-Tags, die Start- und Endpositionen des Textes zu wissen

Question

So habe ich html folgende:

<div class="container"> some beautiful text here </div> 

Was ich will, ist:

<div class="container"> some <span class="highlight">beautiful</span> text <span class="highlight">here</span> 

Ich weiß, wie es das Wissen zu tun Wort. Dank dieser Frage: How to highlight text using javascript Aber ich muss Text an bestimmten Positionen hervorheben. Ich habe Anfangs- und Endpositionen der Saite. Ich habe versucht, wie dies durch die Liste des Start- und Endpositionen Iterieren:

function highlight(divId, startPos, endPos) { 
    inputText = document.getElementById(divId); 
    var wholeText = inputText.innerText; 
    var inHTML = wholeText.substring(0, startPos) + "<span class='highlight'>" + wholeText.substring(startPos, endPos-1) + "</span> " + wholeText.substring(endPos, wholeText.length); 
    document.getElementById(divId).innerHTML = inHTML; 
} 


function highlightAll(fileA, fileB, JSONfile) { 
    var startPositionsA = extractStartPosA(JSONfile); 
    var endPositionsA = extractEndPosA(JSONfile); 
    var startPositionsB = extractStartPosB(JSONfile); 
    var endPositionsB = extractEndPosB(JSONfile); 

    for(var i=0; i < startPositionsA.length; i++) { 
    highlight("TextA", startPositionsA[i]-1, endPositionsA[i]); 
    } 

    for(var i=0; i < startPositionsB.length; i++) { 
    highlight("TextB", startPositionsB[i]-1, startPositionsB[i]); 
    } 
} 

Aber die innerHTML- neu geschrieben nach jeder Iteration, so dass am Ende habe ich nur ein einziges Wort bekommen hervorgehoben - die eine, die ist links nach der letzten Iteration.

Könnte mir bitte jemand helfen? Ich habe keine Ideen, wo ich weiter gehen kann. Vielen Dank!

Answer 1

wenn yout bekommen die richtige Position in startposition und EndPosition Sie eine var enthält die Markierung erstellen:

var highlightStart = "<span class='highlight'>"; 
var highlightEnd = "</span>"; 

einfach Ihren Text an den Positionen in Teile geteilt und die Teile zusammen und die Hervorhebung Vars in der richtige Bestellung

Answer 2

Ist das was du willst?

function highlight(id, start, end) { 
var html = document.getElementById(id).innerHTML; 
document.getElementById(id).innerHTML= [html.slice(0, start), '<span class="highlight">', html.slice(start, end), '</span>', html.slice(end)].join(''); 

}