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 div
s 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; });
Comments
Post a Comment