New Website

I've made a new website, as lynx.io is dead. You can find it here: http://macr.ae/—it's similar in format to lynx.io, but has better articles, and they're all written by me.

JavaScript disabled

While it will still mostly work, a lot of this site's functionality relies on JavaScript - please enable it for the best experience.

A basic BBCode parser

In this article I will show you and explain to you the basic BBCode parser I have built recently for one of my projects. It is lightweight and easy to modify, as it just uses regex. Let's jump in at the deep end and put all the code in one place:

<?php

function parse_bbcode($string) {
    $codes = array(
        '[b]{ALL}[/b]'                  => '<strong>$1</strong>',
        '[i]{ALL}[/i]'                  => '<i>$1</i>',
        '[u]{ALL}[/u]'                  => '<span style="text-decoration: underline">$1</span>',
        '[s]{ALL}[/s]'                  => '<span style="text-decoration: line-through">$1</span>',
        '[size={NUM}]{ALL}[/size]'      => '<span style="font-size: $1">$2</span>',
        '[url={URL}]{ALL}[/url]'        => '<a href="$1">$3</a>',
        '[color={STRING}]{ALL}[/color]' => '<span style="color: $1">$2</span>',
        '[font={STRING}]{ALL}[/font]'   => '<span style="font-family: $1">$2</span>',
        '[img]{URL}[/img]'              => '<img src="$1" alt="$1" />',
    );

    $replace = array(
        '['         => '\[',
        ']'         => '\]',
        '/'         => '\/',
        '{ALL}'     => '(.*)',
        '{URL}'     => '(https?:\/{2}[a-zA-Z0-9\-.]+\.[a-zA-Z]{2,3}(\/\S*)?)',
        '{STRING}'  => '([a-z]+)',
        '{NUM}'     => '([0-9]+)',
    );

    foreach ($codes as $key => $code) {
        $bb_array['/' . str_replace(array_keys($replace), array_values($replace), $key) . '/i'] = $code;
    }

    $string = htmlspecialchars($string);
    $string = nl2br($string);
    return preg_replace(array_keys($bb_array), array_values($bb_array), $string);
}

It may look confusing at first, but it's actually pretty simple. I'm going to cycle through the code, explaining how it all works.

The $codes array is an array of all the BBCodes that you want. This is basically just there for people who don't understand regex, or find it easier to work with plain text. It also makes it easier to implement in environments such as bulletin boards where the administrator isn't necessarily a coder. The $replace array is an array of replacements to be made in order to change $codes into regex.

The foreach below that simply turns $codes into regex - it cycles through and str_replace's everything found in $replace. str_replace looks at a variable and replaces all occurrences of one string with another. For example:

<?php

$string = 'Hello world!';
$string = str_replace('orld', 'illiam', $string);
echo $string; // Hello william!

It also accepts arrays as arguments, for example:

<?php

$string = 'Hi world!';
$string = str_replace(array('orld', 'Hi'), array('illiam', 'Hello'), $string);
echo $string; // Hello william!

str_replace is case sensitive - for a case insensitive version, use str_ireplace instead.

 

Below that, we see the following two lines:

$string = htmlspecialchars($string);
$string = nl2br($string);

htmlspecialchars converts some special characters (specifically the ones that HTML doesn't get on with) to HTML entities. For example:

htmlspecialchars("<a href='test'>Test</a>", ENT_QUOTES); //&lt;a href=&#039;test&#039;&gt;Test&lt;/a&gt;
htmlspecialchars("<a href='test'>Test</a>"); //&lt;a href='test'&gt;Test&lt;/a&gt;

nl2br means "new line to br". It literally does just that - converts all literal line breaks ("\n") to HTML line breaks ("<br />").

 

Then, on the final line:

return preg_replace(array_keys($bb_array), array_values($bb_array), $string);

preg_replace is similar to str_replace, but works with regex's instead of strings. For example:

<?php

$string = 'Hello world!';
$string = preg_replace('/[a-z]/i', 'b', $string);
echo $string; // bbbbb bbbbb!

So, the final line processes the regex's generated by the str_replace and produces the final string.

 

Usage

The function can be used like so:

echo parse_bbcode('[b]Hello world![/b] [url="http://lynx.io/"]lynx.io is awesome[/url]');

About Callum Macrae:

Callum Macrae is the founder of lynx.io and a JavaScript developer from the United Kingdom. He is currently writing his first book, to be published by O'Reilly Media.

You can view more articles by this author here.

Tags: php bbcode parsing preg_match regex

Comments

No comments; leave one below.

says:

Add comment

 

You can use markdown in comments (press "m" for a cheatsheet).

Enable JavaScript to post a comment

Markdown Cheat Sheet

# This is an <h1> tag
## This an <h2> tag
###### This is an <h6> tag

Inline markup: _this text is italic_, **this is bold**, and `code()`.

[Link text](link URL "Optional title")
[Google](http://google.com/ "Google!")

![Alt text](image URL)

![This is a fish](images/fish.jpg)

1. Ordered list item 1
2. Ordered list item 2

* Unordered list item 1
* Unordered list item 2
* Item 2a
* Item 2b

And some code:

// Code is indented by one tab
echo 'Hello world!';

Horizontal rules are done using four or more hyphens:

----

> This is a blockquote

This is an <h1> tag

This an <h2> tag

This is an <h6> tag

Inline markup: this text is italic, this is bold, and code().

Link text Google

This is a fish

  1. Ordered list item 1
  2. Ordered list item 2
  • Unordered list item 1
  • Unordered list item 2
    • Item 2a
    • Item 2b

And some code:

// Code is indented by one tab
echo 'Hello world!';

Horizontal rules are done using four or more hyphens:


This is a blockquote

Toggle MarkDown / HTML (t), full reference or close this