jQuery or CSS: replacing the ® mark with ^®

Question

I have this HTML heading:

<h1>Time Matters&reg;</h1> (equals to: Time Matters®)

I need a way to control the '&reg ;' mark either by CSS or jQuery. As far as I know, I don't think it's possible to target '&reg ;' with CSS, is there?

Now, if jQuery is used, I need to enclose '&reg ;' in < sup > tags, like this:

<h1>Time Matters<sup>&reg;</sup></h1>

...this way I can target the element via CSS.

I tried adapting this tutorial but the code encapsulates all words in < span > tags.

Any idea how to accomplish this? Any help would be greatly appreciated.

Thanks.

Answer 1

A normal Javascript String .replace() should do it:

$(function() {
    $('h1').each(function(i, elem) {
        $(elem).html(function(i, html) {
            return html.replace(/(®)/, "<sup>$1</sup>");
        });
    });
});

Example: http://www.jsfiddle.net/4yUqL/24/

// off-topic

I just realized it, wow this looks pretty impressive

(®)(®)

Answer 2

There is a Javascript function for doing this called replace(). More info here

I would recommend assigning the contents of the element to a variable, using the replace function to swap out the symbol for the <sup> enclosed symbol, then appending it to the document using DOM