Highlight multiple substrings in string -- javascript / jquery

Question

tldr: How do I highlight multiple substrings in a javascript string variable (possibly with different colors that are readable with black text)? Simulated Desired Output:

sample_highlight

Long version

I have a span with some text:

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

I also have a hash containing substrings to highlight:

h = {"t0": [0,2], "t1" : [8,15]}

I would like to highlight the text given the hash of arrays of substring starts and ends. It would look something like this:

This is some text, there are lots of things in here.

I thought about using html tags, but I can't figure out how to replace all the substrings at the same time:

Cumulative Try

First iteration

<tag1>Thi</tag1>s is some text, there are lots of things in here.

Second iteration

<tag1>Th<tag2>i</tag1</tag2>>s is some text, there are lots of things in here.
        ^ this is where the new 8th index is

Sequential Try

If I do it using the original value, I don't know how to add the results together:

First iteration

<tag1>Thi</tag1>s is some text, there are lots of things in here.

Second iteration

This is <tag2>some tex</tag2>t, there are lots of things in here.

Great! but how do I add those together?

Edit:

The tags could very well be nested:

<tag1>hello <tag2>world</tag2></tag1>

Not my normal use case, but I guess it could happen. Even if it just highlighted with a tooltip, that would be helpful, I guess?

You might want to look at [LetteringJS](http://letteringjs.com/) to steal the code. I think it works on the DOM structure. — Pointy, Dec 01 '14 at 23:02
I guess "nested" would have been a more appropriate word. Can the tags be nested within one another? — JTG, Dec 01 '14 at 23:41

Zach · Accepted Answer · 2014-12-02T01:51:10.920

Check out this function I put together. See it working in this JSFiddle

HTML

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

JQuery/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);
    });
}

CSS

.t0 {
   background:#00ff00;
}

.t1 {
    background:#00ffff;
}

.tabtest {
    background:#ccc;
}

It uses JQuery and creates span elements based on the numbers in the hash. The spans get the class of whatever the key is.

"t0": [0,2] will create

<span id="t0">Th</span>

Some Notes:

There cannot be overlap. The html tags won't work when overlapped and the colors wouldn't work anyway
Nested tags wont work, you could probably add some conditional logic and update the hash table based on whether or not the additional code was added before or after but you did mention its not your normal use case to have nested elements so I just added it into the loop for simplicity
You have to list the substrings in the order that they appear.

example:

{"t0": [0,2], "tabtest" : [4,8], "t1" : [9,25]}; works
{"tabtest" : [4,8], "t0": [0,2], "t1" : [9,25]}; will not work

This is because we add an offset to the substring numbers to compensate for the additional characters.

This is fantastic... I think I can make sure they are in order. Don't know what to do with embedded tags though. Maybe I'll just change the color a bit darker on hover and make all the other ones a little lighter? Anyway, Thanks. — Jeff, Dec 02 '14 at 14:14
One more question. Is this reversible? Say I clicked a button to remove all the inner tags, would that work? Would I use the unwrap() function? — Jeff, Dec 02 '14 at 15:09
Yes, $(".texttohighlight span").contents().unwrap(); will get rid of the tags. Just put that inside of a click listener for a button and you should be all set — Zach, Dec 02 '14 at 18:45
Hi, Can you look at https://stackoverflow.com/questions/49420541/highlight-a-string-from-the-text-document-by-adding-spans?noredirect=1#comment85842606_49420541 — ganesh kaspate, Mar 22 '18 at 06:08

Highlight multiple substrings in string -- javascript / jquery

Long version

Cumulative Try

Sequential Try

1 Answers1