jQuery DOM friendly search and replace

Some of you no doubt remember that I was working on a javascript that did a regex search and replace on the innerHTML of a section of a site I do front end development for. I got it working in the end but it had some problems (that we were able to live with), but another project on the same site has highlighted a problem that isn't acceptible.

The problems with the system that we decided we could live with:

* It produced slightly different results in IE and FireFox/Opera.
* It used a monster regex that could lead to maintainence issues in the future
* It doesn't work at all in Safari (though all other reasonably modern browsers that we have available for testing work)

I have now been given the job of adding features to the site that are based on jQuery, specifically its animation and effects, and DOM manipulation features. The script in question fires on $(document).ready and is meant to test for Flash with a JavaScript function. If it finds a supported version of Flash it should then reveal a hidden hyperlink on the page with an animation. When clicked, the button attaches an iFrame to the DOM and loads the Flash movie into it. If Flash isn't found then the link remains hidden and deactiviated.

The problem is that the search and replace script I wrote earlier also needs to run on document load. Each script works fine by themselves, but when both scripts are used together the animated reveal ov the hyperlink begins as it should, but then gets interrupted when the search and replace script runs.

Each script needs to be completely self-contained as some pages will use either one or the other but not both together, but the two scripts need to not interfere with each other when a page that uses them both is loaded.

With some experimentation I have determined that it's the innerHTML text replacement that is causing the problem.

I have done some rewriting of the search and replace script to use some jQuery features (as I will be using it anyway for the other script) and while I have manage to shorten the script by using jQuery functions in place of my own AJAX code I found that if I used the jquery .html method I still had the same problem.

Does anyone have any information on alternatives to using search and replace to do this? Failing that, is there a way to determine whether there is a jQuery animation in progress and waiting until it's complete to do the innerHTML stuff?

why don't you do

$(document).ready(function(){search_replace(); flash();}

because:

a)No actual Flash is loaded into the page, the movie loader simply runs a test javascript (the one from http://www.featureblend.com/javascript-flash-detection-library.html) and if it finds the correct version of the flash player it reveals the button that will trigger a movie load with a jQuery animation effect, and:

b) Each script needs to be self contained and not interfere with each other. They can both make use of jQuery but otherwise must be able to exist entirely independently of each other. Some pages will use the regex hyperlink adder script, some will use the video player script, and some will use both.

One possibility might be adding code to the script that does the search and replace script to see if there are any jQuery animation effects in progress and to wait until they have finished if there are until after they have completed, but I'm not sure how to do this. Additionally, this may fix the interference problem but still wouldn't overcome the other shortcomings mentioned in my earlier post.

If possible I'd rather replace the whole regex search and replace on the innerHTML (or $(element).html in the jQuery version) with a DOM friendly version on the grounds that I need it to be as cross-browser as possible, and because the innerHTML replacement method is only bound to lead to yet more trouble in any future scripts we decide to add.