javascript - Replaced string shows the tag in window -

i replaced part of div (that content editable) tagged word. instead of showing content of new word, shows tags well.

here's original content of div:

this inside <div> tag, , i'd replace [[var12]]

this how i'd look:

this inside <div> tag, , i'd replace var12

however, ends looking this:

this inside <div> tag, , i'd replace <span>var12</span>

this code used:

var pattern = new regexp("\\[\\[var[0-9]*\\]\\]") if ($(this).text().match(pattern)) {     var match = $(this).text().match(pattern);     var num = match.tostring().match(/[0-9]+/);       var tagged = '<span class="variable">var ' + num + '</span>';     $(this).text($(this).text().replace(pattern, tagged));     } 

it looks because you've told escape html using .text(). if want insert html, can use .html().

$(this).html($(this).text().replace(pattern, tagged)); 

from .text() docs:

we need aware method escapes string provided necessary render correctly in html. so, calls dom method .createtextnode(), not interpret string html.