Search/Replace in the DOM with jQuery
Ever had a need to to a text search/replace through the DOM? For articles in drafting on this blog I often use the form (TODO: something) as notes for myself to do some more research. I don't want them sticking around in the text I publish, so I highlighted them red (only for myself). Here's the script I used to accomplish that:
jQuery(function () {
jQuery(":contains(TODO)").not(":has(:contains(TODO))").each(function () {
var that = $(this),
html = that.html();
html = html.replace(/(\(TODO:.*?\))/g, "<span class=\"todo\">$1</span>");
that.html(html);
});
});
The trick is to find only the nodes that contain the actual text, not ancestors of such nodes, which is what you would get with just jQuery(":contains(TOOD)"). Filtering with .not(":has(:contains(TODO))") ensures you've got the bottom most ones. I tried doing this with the ":not()" filter, but it didn't work. I guess that might be a jQuery bug, but the .not() method is a fine alternative.