Automatic HTML formatting

[LittleNicky]

I want to create a tool that when a user inputs normal text (into a text box), the text is automatically changed to html when it's displayed. Any ideas?

[aspnetguy]

If I were to input the following text how would you expect it to come out?

The brown cow walked over the hill

How do you turn text into HTML?

[boen_robot]

I think he refers to

<strong>some</strong> text

Being rendered as

some text

And I must say that if that's the case: that's the worst idea ever. You're practically begging hackers to inject malicios JavaScript there.

[LittleNicky]

I think he refers to

<strong>some</strong> text

Being rendered asAnd I must say that if that's the case: that's the worst idea ever. You're practically begging hackers to inject malicios JavaScript there.

Yer as boen said it. Things like if I want to start a new line I press enter rather than typing <br>

[justsomeguy]

If that's all you want to do, you can use nl2br to convert newlines to "\n<br />".

[dcole.ath.cx]

well you could have it not render js or something, maybe it's for a FM where the users has access to only his folder.you can use AJAX to have it automaticly update without refreshing or submitting a form. A.J.A.X talkes with JS to update the info.

[LittleNicky]

And I must say that if that's the case: that's the worst idea ever. You're practically begging hackers to inject malicios JavaScript there.

So lets say I want to create a blog. The user will have a text area to type their blog in, but when they press enter it appears to start a new line. But when they submit the blog and view it, it's all one block off text. This is what I'm trying to avoid. What would you suggest?

If that's all you want to do, you can use nl2br to convert newlines to "\n<br />".

Whats nl2br?

[aspnetguy]

I think he refers to

<strong>some</strong> text

Being rendered asAnd I must say that if that's the case: that's the worst idea ever. You're practically begging hackers to inject malicios JavaScript there.

Well that depends on if you code it to allow javascript execution...you can easily limit to HTML or even only certain tags using one handy regualr expression.I would suggest using either of these.http://kevinroth.com/rte/http://www.fckeditor.net/The first is more simplistic than the 2nd....depends on your needs

[boen_robot]

So lets say I want to create a blog. The user will have a text area to type their blog in, but when they press enter it appears to start a new line. But when they submit the blog and view it, it's all one block off text. This is what I'm trying to avoid. What would you suggest?Whats nl2br?

What I mean is not to allow entrance of pure HTML in a text area. You could use BBCode as this forum does or create some sort of white list, that is, HTML elements that can be entered, and not allow the user any further modifications. If you choose the BBCodes approach, you must also convert special symbols to entity codes like for example "<" to "<" etc.

[LittleNicky]

What I mean is not to allow entrance of pure HTML in a text area. You could use BBCode as this forum does or create some sort of white list, that is, HTML elements that can be entered, and not allow the user any further modifications. If you choose the BBCodes approach, you must also convert special symbols to entity codes like for example "<" to "<" etc.

That's what I needed! Now how do I implement that?

[justsomeguy]

http://www.php.net/manual/en/function.nl2br.phpGo here for implementation help with bbcode, there are links on the bottom for it:http://www.bbcode.org/

[aleksanteri]

I made my own forum engine once, pure PHP + MySQL... It's very simply though . You could just post posts and threads and read them. You could login and register. Posts had simple formatting (bold, italic, underline, strikethough, font alter, color alter, header, hr [actually, a table with ::: text in th] and smilies [i borrowed these here]). Also you could change your password. Now I'm adding a search engine to it (won't be hard). Also I never distributed it, it was private.My technique to change BBcode-like code (like , , [Tahoma], [Purple]) to HTML was the str_replace() function... like this was the code to change to <b>.

$post = str_replace("[B]", "<b>", $post);$post = str_replace("[/B]", "</b>", $post);

Note it was also case-sensitive! :)You wouldn't even edit your posts... that's under work too.

[justsomeguy]

Note it was also case-sensitive!

Silly kids!http://www.php.net/manual/en/function.str-ireplace.php

[The Reverend]

Regex is the answer my children

function bb($str){	$str = htmlentities($str);		$search = array(								'/\[b\](.*?)\[\/b\]/is',								'/\[center\](.*?)\[\/center\]/is',															'/\[i\](.*?)\[\/i\]/is',							   								'/\[u\](.*?)\[\/u\]/is','/\[video\](.*?)\[\/video\]/is',								'/\[move\](.*?)\[\/move\]/is',								'/\[img\=(.*?)\]/is',								'/\[hr\]/i',								'/\[s\](.*?)\[\/s\]/is',								'/\[o\](.*?)\[\/o\]/is',								'/\[font\=(.*?)\](.*?)\[\/font\]/is',								'/\[url\=(.*?)\](.*?)\[\/url\]/is',								'/\[url\](.*?)\[\/url\]/is',								'/\[img\](.*?)\[\/img\]/is',								'/\[img w\=(.*?)\](.*?)\[\/img\]/is',								'/\[sup\](.*?)\[\/sup\]/is',								'/\[sub\](.*?)\[\/sub\]/is',								'/\[tr\](.*?)\[\/tr\]/is',								'/\[td\](.*?)\[\/td\]/is',								'/\[table\](.*?)\[\/table\]/is',								'/\[tr (.*?)\](.*?)\[\/tr\]/is',								'/\[td (.*?)\](.*?)\[\/td\]/is',								'/\[table (.*?)\](.*?)\[\/table\]/is',								'/\[code\](.*?)\[\/code\]/is',								'/\[email\](.*?)\[\/email\]/is',								'/\[email\=(.*?)\](.*?)\[\/email\]/is',								'/\[quote\](.*?)\[\/quote\]/is',								'/\[quote\=(.*?)\](.*?)\[\/quote\]/is',								'/\n/i'								);		$replace = array(								'<strong>$1</strong>',								'<center>$1</center>',								'<em>$1</em>',								'<u>$1</u>','<object width="425" height="350"><param name="movie" value="$1"></param><embed src="$1" type="application/x-shockwave-flash" width="425" height="350"></embed></object>',								'<marquee>$1</marquee>',								'<img src="$1" />',								'<hr />',								'<span style="text-decoration:line-through;">$1</span>',								'<span style="text-decoration:overline;">$1</span>',								'<span style="font-family:$1">$2</span>',								'<a href="$1" target="_blank">$2</a>',								'<a href="$1" target="_blank">$1</a>',								'<img src="$1" />',								'<img src="$2" width="$1"/>',								'<sup>$1</sup>',								'<sub>$1</sub>',								'<tr>$1</tr>',								'<td>$1</td>',								'<table>$1</table>',								'<tr $1>$2</tr>',								'<td $1>$2</td>',								'<table $1>$2</table>',								'<b>Code:</b><br /><table class="code"><tr><td class="code">$1</td></tr></table>',								'<a href="mailto:$1">$1</a>',								'<a href="mailto:$1">$2</a>',								'<table width=\'60%\' align=\'center\' border=\'1\' bgcolor="#999999"><tr><td><b>Quote:</b></td></tr><tr><td width=\'100%\'><i>$1</i></td></tr></table>',								'<table width=\'60%\' align=\'center\' border=\'1\' bgcolor="#999999"><tr><td><b>Source: $1</b></td></tr><tr><td width=\'100%\'><i>$2</i></td></tr></table>',								'<br />'								);		$str = preg_replace ($search, $replace, $str);					return $str;	};

[reportingsjr]

You never thought of using the <pre> tag lol? I tried this once a chat but what happened was like 2 or 3 spaces were added inbetween every letter. You can try it out though.

[LittleNicky]

Regex is the answer my children

function bb($str){	$str = htmlentities($str);		$search = array(								'/\[b\](.*?)\[\/b\]/is',								'/\[center\](.*?)\[\/center\]/is',															'/\[i\](.*?)\[\/i\]/is',							   								'/\[u\](.*?)\[\/u\]/is','/\[video\](.*?)\[\/video\]/is',								'/\[move\](.*?)\[\/move\]/is',								'/\[img\=(.*?)\]/is',								'/\[hr\]/i',								'/\[s\](.*?)\[\/s\]/is',								'/\[o\](.*?)\[\/o\]/is',								'/\[font\=(.*?)\](.*?)\[\/font\]/is',								'/\[url\=(.*?)\](.*?)\[\/url\]/is',								'/\[url\](.*?)\[\/url\]/is',								'/\[img\](.*?)\[\/img\]/is',								'/\[img w\=(.*?)\](.*?)\[\/img\]/is',								'/\[sup\](.*?)\[\/sup\]/is',								'/\[sub\](.*?)\[\/sub\]/is',								'/\[tr\](.*?)\[\/tr\]/is',								'/\[td\](.*?)\[\/td\]/is',								'/\[table\](.*?)\[\/table\]/is',								'/\[tr (.*?)\](.*?)\[\/tr\]/is',								'/\[td (.*?)\](.*?)\[\/td\]/is',								'/\[table (.*?)\](.*?)\[\/table\]/is',								'/\[code\](.*?)\[\/code\]/is',								'/\[email\](.*?)\[\/email\]/is',								'/\[email\=(.*?)\](.*?)\[\/email\]/is',								'/\[quote\](.*?)\[\/quote\]/is',								'/\[quote\=(.*?)\](.*?)\[\/quote\]/is',								'/\n/i'								);		$replace = array(								'<strong>$1</strong>',								'<center>$1</center>',								'<em>$1</em>',								'<u>$1</u>','<object width="425" height="350"><param name="movie" value="$1"></param><embed src="$1" type="application/x-shockwave-flash" width="425" height="350"></embed></object>',								'<marquee>$1</marquee>',								'<img src="$1" />',								'<hr />',								'<span style="text-decoration:line-through;">$1</span>',								'<span style="text-decoration:overline;">$1</span>',								'<span style="font-family:$1">$2</span>',								'<a href="$1" target="_blank">$2</a>',								'<a href="$1" target="_blank">$1</a>',								'<img src="$1" />',								'<img src="$2" width="$1"/>',								'<sup>$1</sup>',								'<sub>$1</sub>',								'<tr>$1</tr>',								'<td>$1</td>',								'<table>$1</table>',								'<tr $1>$2</tr>',								'<td $1>$2</td>',								'<table $1>$2</table>',								'<b>Code:</b><br /><table class="code"><tr><td class="code">$1</td></tr></table>',								'<a href="mailto:$1">$1</a>',								'<a href="mailto:$1">$2</a>',								'<table width=\'60%\' align=\'center\' border=\'1\' bgcolor="#999999"><tr><td><b>Quote:</b></td></tr><tr><td width=\'100%\'><i>$1</i></td></tr></table>',								'<table width=\'60%\' align=\'center\' border=\'1\' bgcolor="#999999"><tr><td><b>Source: $1</b></td></tr><tr><td width=\'100%\'><i>$2</i></td></tr></table>',								'<br />'								);		$str = preg_replace ($search, $replace, $str);					return $str;	};

It looks impressive, but any chance you can explain what's going on here?

[aleksanteri]

Silly kids!http://www.php.net/manual/en/function.str-ireplace.php

Was there that kind of function? I never saw that.

[LittleNicky]

I made my own forum engine once, pure PHP + MySQL... It's very simply though . You could just post posts and threads and read them. You could login and register. Posts had simple formatting (bold, italic, underline, strikethough, font alter, color alter, header, hr [actually, a table with ::: text in th] and smilies [i borrowed these here]). Also you could change your password. Now I'm adding a search engine to it (won't be hard). Also I never distributed it, it was private.My technique to change BBcode-like code (like , , [Tahoma], [Purple]) to HTML was the str_replace() function... like this was the code to change to <b>.

$post = str_replace("[B]", "<b>", $post);$post = str_replace("[/B]", "</b>", $post);

Note it was also case-sensitive! :)You wouldn't even edit your posts... that's under work too.

So this sort of thing would be implemented by having a 'bold' button which inserts a "B" before and a "/B" after my text that I've selected. Is that correct? So what about inserting a <br>? Users would not want to click a button on the screen every time they want a new line.

[aleksanteri]

\n into <br />?

$post = str_ireplace("\n", "<br />", $post);

That changes every line break into <br />, that works if you have a text area. You can't even write \n in the text box to make a <br />, it is automatically converted to PHP format. :)Oh and this is the exact code for bold I have at my forum engine now:

$post = str_ireplace("[B]", "<b>", $post);$post = str_ireplace("[/B]", "</b>", $post);

You can variate that code to italics, underline (use <span style="text-decoration: underline> if XHTML Strict), strikethrough, even fonts and colors like I did! My technique to fonts and colors was to have a common.lib.php file and there write in an array all the fonts that I would like. Then I just used foreach() for the bold code. Same for colors.

[LittleNicky]

\n into <br />?

$post = str_ireplace("\n", "<br />", $post);

That changes every line break into <br />, that works if you have a text area. You can't even write \n in the text box to make a <br />, it is automatically converted to PHP format.

Ok cool, so do i put all of these into a php file then include them the relevant pages?

[aleksanteri]

Yep.And I also changed all str_replaces to str_ireplaces that they would be case-insensitive (thanks justsomeguy). But that line break code you don't need to, the line break is always \n, never \N.

[justsomeguy]

You can use the nl2br function to convert all newlines to br tags automatically:http://www.php.net/manual/en/function.nl2br.phpAs for the regular expression code:

Regex is the answer my children

function bb($str){	$str = htmlentities($str);		$search = array(								'/\[b\](.*?)\[\/b\]/is',								'/\[center\](.*?)\[\/center\]/is',													'/\[i\](.*?)\[\/i\]/is',						   								'/\[u\](.*?)\[\/u\]/is',								'/\[video\](.*?)\[\/video\]/is',								'/\[move\](.*?)\[\/move\]/is',								'/\[img\=(.*?)\]/is',								'/\[hr\]/i',								'/\[s\](.*?)\[\/s\]/is',								'/\[o\](.*?)\[\/o\]/is',								'/\[font\=(.*?)\](.*?)\[\/font\]/is',								'/\[url\=(.*?)\](.*?)\[\/url\]/is',								'/\[url\](.*?)\[\/url\]/is',								'/\[img\](.*?)\[\/img\]/is',								'/\[img w\=(.*?)\](.*?)\[\/img\]/is',								'/\[sup\](.*?)\[\/sup\]/is',								'/\[sub\](.*?)\[\/sub\]/is',								'/\[tr\](.*?)\[\/tr\]/is',								'/\[td\](.*?)\[\/td\]/is',								'/\[table\](.*?)\[\/table\]/is',								'/\[tr (.*?)\](.*?)\[\/tr\]/is',								'/\[td (.*?)\](.*?)\[\/td\]/is',								'/\[table (.*?)\](.*?)\[\/table\]/is',								'/\[code\](.*?)\[\/code\]/is',								'/\[email\](.*?)\[\/email\]/is',								'/\[email\=(.*?)\](.*?)\[\/email\]/is',								'/\[quote\](.*?)\[\/quote\]/is',								'/\[quote\=(.*?)\](.*?)\[\/quote\]/is',								'/\n/i'								);		$replace = array(								'<strong>$1</strong>',								'<center>$1</center>',								'<em>$1</em>',								'<u>$1</u>',								'<object width="425" height="350"><param name="movie" value="$1"></param><embed src="$1" type="application/x-shockwave-flash" width="425" height="350"></embed></object>',								'<marquee>$1</marquee>',								'<img src="$1" />',								'<hr />',								'<span style="text-decoration:line-through;">$1</span>',								'<span style="text-decoration:overline;">$1</span>',								'<span style="font-family:$1">$2</span>',								'<a href="$1" target="_blank">$2</a>',								'<a href="$1" target="_blank">$1</a>',								'<img src="$1" />',								'<img src="$2" width="$1"/>',								'<sup>$1</sup>',								'<sub>$1</sub>',								'<tr>$1</tr>',								'<td>$1</td>',								'<table>$1</table>',								'<tr $1>$2</tr>',								'<td $1>$2</td>',								'<table $1>$2</table>',								'<b>Code:</b><br /><table class="code"><tr><td class="code">$1</td></tr></table>',								'<a href="mailto:$1">$1</a>',								'<a href="mailto:$1">$2</a>',								'<table width=\'60%\' align=\'center\' border=\'1\' bgcolor="#999999"><tr><td><b>Quote:</b></td></tr><tr><td width=\'100%\'><i>$1</i></td></tr></table>',								'<table width=\'60%\' align=\'center\' border=\'1\' bgcolor="#999999"><tr><td><b>Source: $1</b></td></tr><tr><td width=\'100%\'><i>$2</i></td></tr></table>',								'<br />'								);		$str = preg_replace ($search, $replace, $str);					return $str;	};

The first thing he does is set up two arrays, a "search" array and a "replace" array. The preg_replace function takes both arrays, and the target string. When two arrays are pased to preg_replace, it will replace the first search element by the first replace element, the second search element by the second replace element, the third search element by the third replace element, etc. So the first search element:'/\[b\](.*?)\[\/b\]/is'Which is a regular expression to find all cases of bold tags, gets replaced with the first replace element:'<strong>$1</strong>'Which of course converts it into "<strong>" tags. The $1 is a "backreference", meaning that the $1 gets replaced with the first match from the search pattern. In practical terms, that means that whatever text is between the bold tags will be inserted into the replacement pattern.If you look through the search array, you can see that it finds bold, italic, underline, video, image, strikethrough, object, font, url, code, quote and many more bbcode tags, and replaces them with their corresponding HTML equivalents. It should also be noted that this will also replace all newlines with br tags, so if you use this function as well as nl2br, you will get 2 br tags for every newline (if you use nl2br first since nl2br leaves the newlines, but this function will replace the newline with the br tag).This is actually a very handy function, and is probably exactly what you're looking for.

[aspnetguy]

Only thing I would change is all the single celled tables to <div>

[LittleNicky]

You can use the nl2br function to convert all newlines to br tags automatically:http://www.php.net/manual/en/function.nl2br.phpAs for the regular expression code:The first thing he does is set up two arrays, a "search" array and a "replace" array. The preg_replace function takes both arrays, and the target string. When two arrays are pased to preg_replace, it will replace the first search element by the first replace element, the second search element by the second replace element, the third search element by the third replace element, etc. So the first search element:'/\[b\](.*?)\[\/b\]/is'Which is a regular expression to find all cases of bold tags, gets replaced with the first replace element:'<strong>$1</strong>'Which of course converts it into "<strong>" tags. The $1 is a "backreference", meaning that the $1 gets replaced with the first match from the search pattern. In practical terms, that means that whatever text is between the bold tags will be inserted into the replacement pattern.If you look through the search array, you can see that it finds bold, italic, underline, video, image, strikethrough, object, font, url, code, quote and many more bbcode tags, and replaces them with their corresponding HTML equivalents. It should also be noted that this will also replace all newlines with br tags, so if you use this function as well as nl2br, you will get 2 br tags for every newline (if you use nl2br first since nl2br leaves the newlines, but this function will replace the newline with the br tag).This is actually a very handy function, and is probably exactly what you're looking for.

It does look like what I want. I'm having trouble implementing it tho.At what point might I use the function? I assume I have to apply it to the input of the textarea, but how?

[justsomeguy]

You can just do this:echo bb($post_content);Of course, you have to define the function before you use it, so stick it in an include file or something like that.include("bbcode.php");echo bb($post_content);