How to inject inline HTML tags into the "Title" field

Question

I'm in need of a solution to have this output:

<h1>My Title <sup>&reg;</sup></h1>

And in my template I have this:

<h1>{title}</h1>

I was thinking that I could search for all &regs; within an h1 then wrap it with the ® with the <sup> tag using jQuery.

Maybe i'm looking for something to not strip HTML from the title tag? Does anyone have any other solutions?

Answer 1

The Low Replace plugin is ideal for this.

If your title field contains My Title ® then in your template you can do...

{exp:low_replace find="&reg;" replace="<sup>&reg;</sup>"}{title}{/exp:low_replace}

...which will output My Title <sup>&reg;</sup> as you wanted.

Answer 2

Unless I am misunderstanding something, you should be able to easily do it like so

<h1>{title} <sup>&reg;</sup></h1>

Or, if you want to keep your HTML clean, use the :after pseudo-class in your CSS?

Answer 3

It looks like EE has replaced the character entity with the actual character by the time it outputs the {title}. So you'd have to search for the character rather than the entity.

The jQuery to do what you want would be:

var title = $('h1');
title.html(title.text().split('®').join('<sup>®</sup>'));

That would find all instances of the ® character in your h1 and wrap them in sup tags.

If you didn't want to use Javascript you could do it with PHP and a plugin. Let me know if you'd like to go down that route.