Adding superscript <sup> tags around all trademark and registered trademark symbols

Question

I am trying to add <sup></sup> tags around every ™, ®, © in my page.

I found this question: CSS superscript registration trademark which helped get me started.

The script works in the sense that the tags are being placed in the proper locations, but it is adding two <sup></sup> tags around each instead of just one.

Here is my JS adding the tags:

jQuery("body").html(
    jQuery("body").html().replace(/&reg;/gi, '<sup>&reg;</sup>').replace(/®/gi, '<sup>&reg;</sup>').
        replace(/&trade;/gi, '<sup>&trade;</sup>').
        replace(/™/gi, '<sup>&trade;</sup>').
        replace(/&copy;/gi, '<sup>&copy;</sup>').
        replace(/©/gi, '<sup>&copy;</sup>')
);

How can I make sure the tags are only added once per symbol? A conditional of some sort maybe?

Answer 1

Instead of rewriting the entire markup (and removing all bound events), I'd go for something like that:

$('body :not(script)').contents().filter(function() {
    return this.nodeType === 3;
}).replaceWith(function() {
    return this.nodeValue.replace(/[™®©]/g, '<sup>$&</sup>');
});

DEMO: http://jsfiddle.net/QTfxC/