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>