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

(®)(®)