Efficient string manipulation in Javascript

  • A+

I have a string (HTML content) and an array of position (index) objects. The string length is about 1.6 million characters and there are about 700 position objects.


var content = "<html><body><div class="c1">this is some text</div>...." var positions = [{start: 20, end: 25}, {start: 35, end: 37}....] 

I have to insert an opening span tag into every start position within the string and a close span tag into every end position within the string.

What is the most efficient way to do this?

So far I have tried sorting the positions array in reverse, then looping through and then using replace / splice to insert the tags, eg:

content = content.slice(0, endPosition) + "</span>" + content.substring(endPosition); content = content.slice(0, startPosition) + "<span>" + content.slice(startPosition); 

(Notice how I have started the loop from the end in order to avoid messing up the start/end positions).

But this takes about 3 seconds, which seems slow and inefficient to me.

What is a more efficient way to do this?


Instead of modifying the big string each time, try accumulating processed "chunks" in a new buffer:

content = '0123456789' positions = [   [1, 3],   [5, 7] ]  buf = [] lastPos = 0  for (let [s, e] of positions) {   buf.push(     content.slice(lastPos, s),     '<SPAN>',     content.slice(s, e),     '</SPAN>'   )   lastPos = e }  buf.push(content.slice(lastPos))   res = buf.join('') console.log(res)


:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: