Ultimate BBCode Parser

[soniclnd]

it's me soniclnd again......... I've been out for a while mostly because i've been more interested in PHP and stuff.... i read that other tutorial on BBcode and saw that people were interested on it, so i decided to cover more than just smilies......


In this tutorial I will try to teach you how to change a string into BBCode
For this tutorial you should have a background knowledge of PHP and Regular Expresions. Please Bear with me as I am new in this whole tutorial business :)

__________________________________________________ ___________________
Background and goals

So, you just made a new PHP website and you have made a Guestbook, Chatterbox, or anything else that requires user input... You think it looks plain and you want to give the user more choices, so you want to use the ever so famous(or not so) BBCode that you see on all those fancy forums... Well here's the plan to do it:

> You get a string of what you want to change
> You replace all occurences of BB formating with their HTML counterpart(ex: [ b]and[/ b] with and)
> You asign that new string a name which you can later use

How can we achieve this?: You can take advantage of PHP's PCRE functions, specifically preg_replace().

__________________________________________________ ___________________
Stablishing the Regex

Now that we've got our plan, you can start executing it.
First is to identify what preg_replace() needs: preg_replace() needs at least 3 arguments:
> mixed pattern
> mixed replacement
> mixed subject

Mixed pattern is the regex to find what we want to replace(it can be a string or an array), Mixed replacement is what we will replace it with(it can be a string or an array), and Mixed subject is where this replacement will take place(it can also be a string or an array).

So we need to create the Regex. We need to first take a look at a basic BBcode:

[ b ]bold[/b]
[ i ]italics[/i]
[ u ]underlined[/u]
[ url=h ttp://something.com]link to something[/url]
[ img ]image.png[/img]

Let's create a regex for the [ b ] tag:
There will always be the [ b ] part present so we can safely add "\[b\]" notice how I've scaped the brackets, this is because the brackets are used to define Character Classes in the regex engine

now there will be something that varies. we could but a dot "." but this won't match if there is a line break, we can also add something like "[^\[]" (anything that isn't an openig bracket) This would be a good choice, however it won't match things like [ b][ i][u ]something[/ u][/ i][/ b].... Whenever I want to match everything I use [\D\S] (it matches anything that isn't a digit or isn't a space, since nothing is both a digit and a space, it matches everything) so now we have "\[b\][\D\S]"

however we want to match more than one character so we add the plus sign "+" after the character class and we want it to be non-greedy so we have: "\[b\][\D\S]+?"

Now the [/b] part will always be present, so we can add it literally to the end "\[b\][\D\S]+?\[/b\]"
We will need to remember what's betwen the tags for later, so we'll add the parenthesis around it: "\[b\]([\D\S]+?)\[/b\]"

This is a good regex, however we have to format it for the PHP Regex engine, in it we need to specify a modifyer and escape all forward-slashes(/), so now our PHP regex will look like this: "/\[b\]([\D\S]+?)\[\/b\]/"

the [ i] and [ u ] tags are very similar so we can just change the b for the respective letter:

"/\[b\]([\D\S]+?)\[\/b\]/"
"/\[i\]([\D\S]+?)\[\/i\]/"
"/\[u\]([\D\S]+?)\[\/u\]/"

The [ url ] tag:
We can literally add the +)\]"

Next there can be anything, so we'll use "[\D\S]" again(we'll also need to remember this for later so we'll add the parenthesis again). And afterwards We'll just add the literally. So our regex now looks like the following: "\[url=(?:htt p://)?([/0-9a-zA-Z._-]+)\]([\D\S]+?)\[/url\]", when it is optimized for PHP it will lookl like this: "/\[url=(?:http:\/\/)?([\/0-9a-zA-Z._-]+)\]([\D\S]+?)\[\/url\]/"

The [ img ] tag:
This is very similar to the first one we made so I'll just show you what it looks like: "/\[img\]([\D\S]+?)\[\/img\]/"

So our Regular expressions are the following:

"/\[b\]([\D\S]+?)\[\/b\]/"
"/\[i\]([\D\S]+?)\[\/i\]/"
"/\[u\]([\D\S]+?)\[\/u\]/"
"/\[url=(?:http:\/\/)?([\/0-9a-zA-Z._-]+)\]([\D\S]+?)\[\/url\]/"
"/\[img\]([\D\S]+?)\[\/img\]/"

__________________________________________________ ___________________
The replacements

Now that you have your regex we'll need the replacements:

[ b ], [ i ], and [ u ]:
We'll replace the [ b ]something[/ b] matches with something. So we'll have the tag, whatever we remembered(what's inside parenthesis......) and the . so our replacement will look like the following: $1. The $1 is the pointer for the first group(the first stuff that's inside the parenthesis).
For the [i] and [u] it's the same so we have:

$1
$1
$1

[ url ] replacement:
We'll replace [u rl=http ://something.com]link to something[/ url ] with link to something. We'll have the , afterwards we have the second thing we remembered then . so our replacement looks like the following: "<a href=\"http://$1\">$2</a>"

[ img ] replacement:

Well replace [ img ]something.png[/ im g] with [img]something.png[/img]. so we have [img], what we remembered, then [/img]. our replacement will be the following "[img]$1[/img]"

Our replacements will be the following:

"$1"
"$1"
"$1"
"$2"
""

__________________________________________________ ___________________
Putting everything together

Now we need to put everything together onto our preg_replace() function

We'll put the regexes together in an array:

$regexes = array(
"/\[b\]([\D\S]+?)\[\/b\]/"
"/\[i\]([\D\S]+?)\[\/i\]/"
"/\[u\]([\D\S]+?)\[\/u\]/"
"/\[url=(?:http:\/\/)?([\/0-9a-zA-Z._-]+)\]([\D\S]+?)\[\/url\]/"
"/\[img\]([\D\S]+?)\[\/img\]/"
);

And we'll do the same with the replacements:

$replacements = array(
"$1"
"$1"
"$1"
"$2"
""
);

Le'ts say your original writting is in variable $text. We'll use preg_replace() to make a new variable called $formated

$formated = preg_replace($regexes, $replacements, $text);

__________________________________________________ ___________________
Aditional stuff

So you want smilies and quotes eh?.... No problem:
Quotes
if you want quotes you can add "/\[quote]([\D\S]+?)\[\/quote\]/" to the regexes array and "<div class=\"quote\">Quote:
$1</div>" to the replacements array
NOTE: you must style class="quote" to your preferences in your stylesheet....

Smilies
smilies can be replaced using literal regexes, so i won't go into detail, remember that some smilies have certain characters that must be escaped in regular expressions. Here are some examples of smily regexes:
NOTE: i add my smilies with $regexes[]= which adds one more entry to the regexes array, i add the coresponding replacement with $replacement[]= which adds one more entry to the replacement array, i put them separate from the other BBCode so it's easier to edit them....

$regexes[]= "/:\)/";
$replacements[]= "";

$regexes[]= "/;\)/";
$replacements[]= "";

$regexes[]= "/:D/";
$replacements[]= "";

$regexes[]= "/:\(/";
$replacements[]= "";

$regexes[]= "/:cool:/";
$replacements[]= "";

$regexes[]= "/:rolleyes:/";
$replacements[]= "";

$regexes[]= "/:shock:/";
$replacements[]= "";

$regexes[]= "/:confused:/";
$replacements[]= "";

$regexes[]= "/:blush:/";
$replacements[]= "";

$regexes[]= "/:o/";
$replacements[]= "";

$regexes[]= "/:\?:/";
$replacements[]= "";

$regexes[]= "/:!:/";
$replacements[]= "";

$regexes[]= "/:arrow:/";
$replacements[]= "";

$regexes[]= "/:evil:/";
$replacements[]= "";

$regexes[]= "/:twisted:/";
$replacements[]= "";

$regexes[]= "/:mrgreen:/";
$replacements[]= "";

Your final code inclucing quotes and smilies would look something like this:

$regexes = array(
"/\[url=(http:\/\/)?([\/0-9a-zA-Z._-]+)\]([\D\S]+?)\[\/url\]/",
"/([ \t\r\n]|^)(http:\/\/[\D\S]+?)([ \t\r\n]|$)/",
"/\[quote\]([\D\S]+?)\[\/quote\]/",
"/\[b\]([\D\S]+?)\[\/b\]/",
"/\[i\]([\D\S]+?)\[\/i\]/",
"/\[u\]([\D\S]+?)\[\/u\]/",
"/ */",
"/\n/"
);

$replacements = array(
"$3",
"$2",
"Quote:
$1
",
"$1",
"$1",
"$1",
" ",
"
"
);

$regexes[]= "/:\)/";
$replacements[]= "";

$regexes[]= "/;\)/";
$replacements[]= "";

$regexes[]= "/:D/";
$replacements[]= "";

$regexes[]= "/:\(/";
$replacements[]= "";

$regexes[]= "/:cool:/";
$replacements[]= "";

$regexes[]= "/:rolleyes:/";
$replacements[]= "";

$regexes[]= "/:shock:/";
$replacements[]= "";

$regexes[]= "/:confused:/";
$replacements[]= "";

$regexes[]= "/:blush:/";
$replacements[]= "";

$regexes[]= "/:o/";
$replacements[]= "";

$regexes[]= "/:\?:/";
$replacements[]= "";

$regexes[]= "/:!:/";
$replacements[]= "";

$regexes[]= "/:arrow:/";
$replacements[]= "";

$regexes[]= "/:evil:/";
$replacements[]= "";

$regexes[]= "/:twisted:/";
$replacements[]= "";

$regexes[]= "/:mrgreen:/";
$replacements[]= "";

$formated = preg_replace($regexes, $replacements, $text);

__________________________________________________ ___________________
Final words of wisdom

Wen used with arrays, preg_replace() looks for $regexes[0] and replaces it with $replacements[0], $regexes[1] with $replacements[1], etc... So it is extremely important that you have coresponding regexes and arrays in the same index number
NOTE: some of the BBCode has been spaced out like [ b ] so it won't be parced by the forums
NOTE: Regular expressions can seem daunting at first, but if you're serious about programming you should be familiar with them sooner or later.....
__________________________________________________ ___________________


And that's it!
You now have a varible called $formated in which all the BBcode has been parsed... Let's take our first code and use it as an example:

[ b]bold[/ b]
[ i]italics[/ i]
[u ]underlined[/ u]
[u rl=http ://something.com]link to something[/ url]
[ img]image.png[/ img]

If this code is in a variable, and preg_replace() is used with the parameters we used the output whould be:

bold
italics
underlined
link to something

Well... I hope this all kinda made sense to you don't hesitate to contact me if you have problems....
Useful links:
Regular Expressions tutorial
preg_replace() documentation


Well i hope this wasn't too confusing...

[tacoX]

First off - its nice to see ya&#39; around on the boards I was wondering where you were at man. Long time no see.

Thanks for the BBCode code, thats pretty cool .

[soniclnd]

yeah, thanx..... i&#39;ve just been working on my site and learning about PHP and such.... also been vacationing, and i kinda stop doing gfx, but since there&#39;s a coding forum i thought i&#39;d post something useful.....

[MajesticM00se]

i good parser needs to parse individual characters also because the parser is supposed to stop people from creating messages or invaliad posts that could currupt the page so if your going to use this always remember to add something like:

$characters = array(
"&" * * * * *=> * *"&",
"<" * * * * *=> * *"<",
">" * * * * *=> *	">",
" *" * * * * *=> * *" ",
" *" * * * *	=> * *" ",
"\t" * * * *	=> * *" ",
"/^ {1}/m" * * * *=> *	"",
chr(13) * * * *	=> *	"<br>"
);

$text = str_replace(array_keys($characters), array_values($characters), $text);

it will parse characters like > < to their web formatted code and it will also parse a line break for you on press of return

[soniclnd]

OR, you could just do htmlspecialchars(&#036;string); before parsing......

[Kavacky]

Nice tutorial, one of the best i`ve seen.

But i`ll give you a hint:
http://www.mydomain.lv/page.php?myvar=myval&othervar=otherval