Replace Content in PRE Tags with HTML Entities

By  on  

If you have a website that relies heavily on PRE tags, you know the important of converting PRE tag content to their HTML entities. Doing so prevents worlds of possible rendering issues. The following PHP snippet HTML-Entitizes (?) any code within PRE tags:

//replaces pre content with html entities
function pre_entities($matches) {
	return str_replace($matches[1],htmlentities($matches[1]),$matches[0]);
}
//to html entities;  assume content is in the "content" variable
$content = preg_replace_callback('/<pre.*?>(.*?)<\/pre>/imsu',pre_entities, $content);

I use this for just about every post I write. You could also stick this in your CMS if you have clients that may have use for PRE tags.

Recent Features

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • By
    MooTools CountDown Plugin

    There are numerous websites around the internet, RapidShare for example, that make you wait an allotted amount of time before presenting you with your reward. Using MooTools, I've created a CountDown plugin that allows you to easily implement a similar system. The MooTools JavaScript The CountDown class...

  • By
    CSS :target

    One interesting CSS pseudo selector is :target.  The target pseudo selector provides styling capabilities for an element whose ID matches the window location's hash.  Let's have a quick look at how the CSS target pseudo selector works! The HTML Assume there are any number of HTML elements with...

Discussion

  1. Beware that having someting like “something” in another would leave you with one opening and two closings. If this is a possible usecase, you might use a regex like this :

    /(.*?[.*]*)/imsu

    …but it still wouldn’t handle the case of having a single closing tag inside another . Could someone manage to write a regex which would handle this case ?

    The function name (pre_entities) should be between quotes otherwise it will throw a notice.

  2. Beware that having a pre tag inside another pre tag would leave you with one pre opening and two pre closings. If this is a possible usecase, you might use a regex like this :

    /<pre.*?>(.*?[<pre.*?>.*<\/pre>]*)<\/pre>/imsu

    The tags got stripped in my first comment, sorry about that, if htmlentities show up in the regex, replace them with the good characters …but it still wouldn’t handle the case of having a single closing pre tag inside another pre. Could someone manage to write a regex which would handle this case ?

    The function name (pre_entities) should be between quotes otherwise it will throw a notice.

  3. It works as long as you don’t have nested <pre> tags.
    I wrote about this on my blog but the only real way to do it is to use an XML parser.

  4. One issue to watch out for is to not encode any of the content before this is run, as it will double-entitize the ampersand e.g., &amp;.

    Also, would there be any issues if not matches are found?

  5. Derrick Nelson

    To solve the nested ‘pre’ tag issue, just use some non-standard tags that you’re sure won’t be in your content, rather than ‘pre’ (i.e. ‘mycode’). Your regular expression then becomes a match for the ‘mycode’ tags, and you can immediately follow it up with another preg_replace () to turn the ‘mycode’ tags into ‘pre’ tags after you’re done htmlentitizing the content.

  6. I’ve been using elliotswan.com/postable. It seems to get the job done for me. But it’s nice to know this option.

  7. carter

    Could someone explain how to fix the following notice?

    Notice: Use of undefined constant pre_entities – assumed ‘pre_entities’ in C:\wamp\www\example.com\admin\get_posts.php on line 16

  8. carter

    doh! put quotes on ‘pre_entities’, fixes it. Thanks David! Great snippet.

  9. Thank you for the tip! I couldn’t find what was going wrong with the HTML…

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!