javascript - replace method works without html formatting but with formatting -

i trying replace color of text when user clicks on cell value. seems when try use formatting in html, stopped working, however, works totally fine without formatting. jsfiddles in understanding taking about. before that, mention few things:

1. when not formatting, using

   <div id='jqxpanel' style=" font-size: 13px; font-family: verdana;"> content here </div> , var text = panel.text();

2. when using formatting, using

   <div id='jqxpanel' style=" font-size: 13px; font-family: verdana;"><div style="margin: 10px;"><pre>my content here </pre></div></div> , var text = panel.html();

here working jsfiddle without formatting , non working jsfiddle formatting feature. how can make non working jsfiddle work can see highlighted text?

i updated jsfiddle

$("#jqxgrid").on("cellclick", function (event)                     {     var value = event.args.value;     var color = "#ff0000";     var highlighted =                           text.replace( new regexp(value, 'ig' ), '<span style="color:' + color + ';">' + value + '</span>');      panel.jqxpanel('clearcontent');     panel.jqxpanel('append', highlighted);   });   

you're trying replace " " instead of "something" (notice blanks). , you're doing both in search string , replacement.

also, replace function case-sensitive. added regexp make case-insensitive.

but, example, can see replaces text case of button, "patient" "patient" highlighted.