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/

Answer 2

This works for me.

$("p,h1,h2,h3,h4,li,a").each(function(){
    $(this).html($(this).html().replace(/&reg;/gi, '<sup>&reg;</sup>').replace(/®/gi, '<sup>&reg;   </sup>'));
});

Answer 3

@VisioN's answer didn't work that well for me, although it was facing the right direction. I tweaked it a little bit:

var regexp = /[\xAE]/;
$('body :not(script,sup)').contents().filter(function() {
    return this.nodeType === 3 && (regexp.test(this.nodeValue));
}).replaceWith(function() {
    return this.nodeValue.replace(regexp, '<sup>$&</sup>');
});

This method makes use of the character hex, instead of using the character code. I looked up the hex on character-codes.com and picked the character hex of the ® character. The value is AE so that's how I got to my solution. Let me know if this one worked for you!

Answer 4

This worked for me on my Drupal 8 website:

(function ($, Drupal) {
var regexp = /[\u2122]/;
$('body :not(script,sup)').contents().filter(function() {
    return this.nodeType === 3 && (regexp.test(this.nodeValue));
}).replaceWith(function() {
    return this.nodeValue.replace("\u2122", "<sup>&trade;</sup>");
});
})(jQuery, Drupal);