JQuery or CSS: Replacing Label ® with ^{& reg;}

Question

I have this HTML header:

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

I need a way to manage the label & reg; "either using CSS or using jQuery. As far as I know, I don’t think it’s possible to customize" & reg; "using CSS, is there?

Now, if jQuery is used, I need to conclude ' & reg; 'in <sup> for example:

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

... so I can target the element through CSS.

I tried to adapt this tutorial , but the code encapsulates all the words in the <span>.

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

Thanks.

Answer 1

Normal Javascript String .replace() should do this:

 $(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 figured it out, wow it looks pretty impressive

 (®)(®) 

Answer 2

To do this, use a Javascript function called replace (). More here

I would recommend assigning the contents of an element to a variable using the replace function to replace the character for the private <sup> character, then adding it to the document using the DOM

Answer 3

Here, the Javascript solution:

 var replaceHTMLCharacterEntities = function (expression, tag, superscript) { var regex = new RegExp(expression, 'g'), iTag = tag.toUpperCase(), iSuperscript = expression[superscript](), tags = document.getElementsByTagName(iTag), i = 0, tagsLength = tags.length, html = ""; for (i; i < tagsLength; i++) { html = tags[i].innerHTML.replace(regex, iSuperscript); tags[i].innerHTML = html; } }; replaceHTMLCharacterEntities("\u00a9", "h1", "sup"); replaceHTMLCharacterEntities("\u00AE", "p", "sub"); replaceHTMLCharacterEntities("\u24C8", "p", "sub"); 

Here's the jsfiddle.