Question

My team has come to conclusion that in order to highlight certain text we will use !!! as special symbol. Long story.

I love !!!JavaScript and jQuery!!!.

should get transformed into

I love <span class='hl'>JavaScript and jQuery</span>.

Do not worry about the edge cases. We are developing a system for school children and they don’t have complex text with lots of bangs.

How do I do that?

Bonus question: After the span is applied then I was going to use jQuery higlighter plugin to highlight that code. Any suggestion in that direction.

Answer 1

replace in Javascript only replaces the first occurrence of a string, so you can put this feature to good use and do this:

var mytext = "I love !!!Javascript and jQuery!!!. Ya, !!!jQuery!!! rocks!";

while(true) {
    if (mytext.indexOf('!!!') == -1) break;
    mytext = mytext.replace('!!!', '<span class="hl">');
    mytext = mytext.replace('!!!', '</span>');
}
alert(mytext);

Output:
I love <span class="hl">Javascript and jQuery</span>. Ya, <span class="hl">jQuery</span> rocks!