JSFiddle - React, Tailwind, and code Playground

HTML

<span class="texttohighlight">This is some text, there are lots of things in here.</span>

CSS

.t0 {
   background:#00ff00;
}

.t1 {
    background:#00ffff;
}

.tabtest {
    background:#ccc;
}

JavaScript

var hash = {"t0": [0,2], "tabtest" : [4,8], "t1" : [9,25]};

highlightWords(hash);

function highlightWords(hash) {
    var offset = 0;
    var original;
    
    $.each(hash, function(key, val) {
        original = $(".texttohighlight").html();
        var length = original.length;
        var before = original.substring(0,val[0]+offset);
        var replace = original.substring(val[0]+offset, val[1]+offset);
        var after = original.substring(val[1]+offset,length);
        var final = before + "<span class='"+key+"'>" + replace + "</span>" + after;
        offset += 22 + key.length;
        $(".texttohighlight").html(final);
    });
}