Javascript RegExp for matching text which isn't part of HTML tag -

i try find way highlight text in html. following html given:

<div>this text contains matching words word1 , word2 , xyzword1xyz , word2xyz , xyzword2</div> 

the list of words should surrounded <span> is:

var array = ['word1','word2', 'word1word3']; 

my current javascript:

$.each(array , function(index, elem){             if(elem.length<3 || elem === "pan" || elem === "spa" || elem === "span")return true;                          var re = new regexp(""+elem+"(?=([^']*'[^']*')*[^']*$)","gi");             returnstring = returnstring.replace(re, "<span class='markedstring colorword1orword2'>$&</span>");                 }); 

the resulting div like:

<div>this text contains matching words <span class='markedstring colorword1orword2'>word1</span> , <span class='markedstring colorword1orword2'>word2</span> , xyz<span class='markedstring colorword1orword2'>word1</span>xyz , <span class='markedstring colorword1orword2'>word2</span>xyz , xyz<span class='markedstring colorword1orword2'>word2</span> , <span class='markedstring colorword1orword2'><span class='markedstring colorword1orword2'>word1</span>word3</span></div> 

due current regexp everthing in class='markedstring colorword1orword2' isn't matched.

problem: if array like

var array = ['word1','word2', 'class']; 

i end

<div>this text contains matching words <span <span class='markedstring colorword1orword2'>class</span>='markedstring colorword1orword2'>word1</span> , <span <span class='markedstring colorword1orword2'>class</span>='markedstring colorword1orword2'>word2</span> , xyz<span <span class='markedstring colorword1orword2'>class</span>='markedstring colorword1orword2'>word1</span>xyz , <span <span class='markedstring colorword1orword2'>class</span>='markedstring colorword1orword2'>word2</span>xyz , xyz<span <span class='markedstring colorword1orword2'>class</span>='markedstring colorword1orword2'>word2</span> , <span <span class='markedstring colorword1orword2'>class</span>='markedstring colorword1orword2'><span <span class='markedstring colorword1orword2'>class</span>='markedstring colorword1orword2'>word1</span>word3</span></div> 

this example somehow constructed, there other words might standing in html tags itself.

i need way simulate regexp-lookbehind can make rule like:

match not between <span , > allow cascaded matchings <span>adsa<span>asdsa</span></span>

does regexp-guru has idea how archieved?

you can try (no looping):

var $div = $('#the_id_of_ the_div'),     array = ['word1','word2', 'word1word3'],     re = new regexp(array.join('|'), 'gi'),     divhtml = $div.text().replace(re, "<span class='markedstring colorword1orword2'>$&</span>"); $div.html(divhtml); 

this example, div jquery object outside snippet in post.

---

edit

if you've bunch of divs in wrapper, can this:

var array = ['word1','word2', 'word1word3'],     re = new regexp(array.join('|'), 'gi'); $('#wrapper div').each(function () {     var divhtml = $(this).text().replace(re, "<span class='markedstring colorword1orword2'>$&</span>");     $(this).html(divhtml);     return; }); 

a live demo @ jsfiddle.