I'm trying to highlight the pattern matched string in the  text withing the pre tag. 

e.g. <div><pre> This is test html </pre></div> . The data within the pre tag is around 400KB. Also before highlighting I'm running the google prettify code as per my necessity. I'm using the code like following:

highLtText = '[a-z]+'   // any regular expression given by user in the input TextBox

regEx = new RegExp('(' + highLtText + ')', "ig");

var preTextStr = $('pre').html();

changeTxt = preTextStr.replace(regEx, "<span class='highlight'>$1</span>");

$('pre').html(changeTxt);

Now my problem is , when the size of text within pre tag is smaller this works fine but if the size is around the 400KB the browser hangs or become slower(but gives the correct result). First I thought that the 'replace' function for regular exp. is taking time but I tried to put the alerts before and after the '$('pre').html(); ' statement and found that this is taking time. So is there any efficient method to implement this functionality. What is the reason for this much time ? Will using repalceWith() or text() help me ?

Any help would be greatly appreciated and Thanks in advance !! 

-Prem