Convert Html Special Chars Entities Inside Code and Pre Tags

by admin admin Date: 02-07-2013


If you're ever posting a piece of code on your blog or whatever, you've probably realized that it's a pain to have to convert any special character to its HTML entity. Why not take the pain away and let PHP handle that for you?

There really isn't a foolproof method to pull this off, and I have been told that traversing the code using the DOM would be better, but this function (as ugly as it is) actually works quite well if you have a proper HTML structure with valid code.
It checks for any <code> and <pre> tags and converts any special characters inside them to there respective HTML entity. It even accounts for nested <code> and <pre> tags, as well as any attributes you give them.

The Function

function fixcodeblocks($string) 
{
return preg_replace_callback('#<(code|pre)([^>]*)>(((?!</?\1).)*|(?R))*</\1>#si', 'specialchars', $string);
}

function specialchars($matches)
{
return '<'.$matches[1].$matches[2].'>'.htmlspecialchars(substr(str_replace('<'.$matches[1].$matches[2].'>', '', $matches[0]), 0, -(strlen($matches[1]) + 3))).'</'.$matches[1].'>';
}

echo fixcodeblocks($html);

That would turn something like this:

<h1>Heading</h1>
<p>Some stuff here, but no actually code yet.</p>
<p>Here is our first code that needs to be escaped: <code><div id="test">Something inside a DIV</div></code></p>
<pre id="test">
<html>
<head>
<meta name="author" content="First Last" />
</head>
<body>
<p>Hey</p>
</body>
<div id="nested">
<div id="nest-inside">
<p>Inside nest</p>
</div>
</div>
<code>Another code block inside some code.</code>
</html>
</pre>
<h2>More Content</h2>

into this:

<h1>Heading</h1>
<p>Some stuff here, but no actually code yet.</p>
<p>Here is our first code that needs to be escaped: <code>&lt;div id=&quot;test&quot;&gt;Something inside a DIV&lt;/div&gt;</code></p>
<pre id="test">
&lt;html&gt;
&lt;head&gt;
&lt;meta name=&quot;author&quot; content=&quot;First Last&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Hey&lt;/p&gt;
&lt;/body&gt;
&lt;div id=&quot;nested&quot;&gt;
&lt;div id=&quot;nest-inside&quot;&gt;
&lt;p&gt;Inside nest&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;code&gt;Another code block inside some code.&lt;/code&gt;
&lt;/html&gt;
</pre>
<h2>More Content</h2>

Feel free to offer any suggestions or improvements you might have, as well as any other ways of accomplishing this.

 
by admin admin Date: 02-07-2013 hits : 2767