Convert Html Special Chars Entities Inside Code and Pre Tags

Convert HTML Special Chars Entities Inside Code and Pre Tags
by Janeth Kent 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 Janeth Kent Date: 02-07-2013 hits : 3173  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.

 
 
 

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration