Introduktion till BBCode

En kort introduktion till hur du integrerar BBCode på din hemsida med hjälp av PHP.

Många av er är säkerligen redan bekanta med BBCode, som förövrigt är en förkortning av Bulletin Board Code. Detta kodningsformat förekommer ofta på forum, bloggar etcetera. Syftet med kodningsformatet är att underlätta för användaren ifråga att formatera sina inlägg snyggare med hjälp av till exempel länkar med titlar eller att bifoga bilder. Nedan följer en kort introduktion om hur du kan integrera BBCode med ditt forum eller din blogg med hjälp av en enkel PHP-funktion.

Grundprincipen är den att textsträngen, det vill säga själva inlägget som skall postas, körs genom ett så kallad reguljärt uttryck, regex. Regex gör det möjligt att på ett mycket kompakt sätt utföra sökmönster för mer avancerade saker än enkla ord. Generellt sätt kan man säga att regex är ett smidigt sätt att visa vilka uttryck som förekommer ett flertal gånger i en sträng. En annan fördel med regex i det här fallet är att den endast tar hänsyn till rätt formaterade taggar. Detta förhindrar att texten ifråga formateras på fel sätt om taggarna inte är uppbyggda på rätt sätt.

Alla BBCode-taggar som hittas i textsträngen ersätts sedan med korrekta html-taggar. Så här kan en enkel BBCode-funktion se ut. Funktionen nedan söker igenom textsträngen efter bold-taggen och ersätter dessa med den korrekta html-taggen för att göra texten i fråga bold (fet).

<?
    function bbCode($str) {
        $pattern[] = '/\[b\](.*?)\[\/b\]/i';
        $replace[] = '<b>$1</b>';
        
        return preg_replace($pattern, $replace, $str);
    }
?>

Som ni kanske ser har både variabeln $pattern och $replace ett par klamrar efter sig. Dessa klamrar gör variabeln till en så kallad array vilket är nyttigt eftersom vi senare kan lägga till fler BBCode-taggar att leta efter.

Så variabeln $pattern söker alltså igenom textsträngen efter BBCode-taggar. Lägg märke till (.*?) i ovannämnda variabel. Denna symbol innehåller texten som skall omformateras och slutgiltigen bli bold. Detta tecken motsvarar sedan $1 i variabeln $replace.

Funktionen ovan fungerar utmärkt när ett nytt inlägg skall postas. Men om användaren upptäcker ett fel i sitt inlägg och vill redigera det måste textsträngen formateras tillbaks. Annars kommer html-taggarna visas istället för BBCode-taggarna. Detta löser vi enkelt genom att lägga till en parameter till funktionen vid namn $num. Denna parameter kan ha värdet 1 eller 0. Är värdet 0 formateras BBCode-taggarna i textsträngen till html-taggar. Är värdet 1 formateras html-taggarna i textsträngen till BBCode-taggar.

<?
    function bbCode($str, $num) {
        if($num == 0) {
            $pattern[] = '/\[b\](.*?)\[\/b\]/i';
            $replace[] = '<b>$1</b>';
        }
        
        if($num == 1) {
            $pattern[] = '/\<b>(.*?)\<\/b\>/i';
            $replace[] = '[b]$1[/b]';
        }
        
        return preg_replace($pattern, $replace, $str);
    }
?>

Om du nu vill anropa funktionen och formatera BBCode-taggarna till html-taggar gör du som i exemplet nedan. Observera att variabeln $str motsvarar själva inlägget ifråga.

<?
    bbCode($str, 0); 
?>

Om du istället vill anropa funktionen och formatera html-taggarna till BBCode-taggar gör du som i exemplet nedan.

<?
    bbCode($str, 1);
?>

Nu har du grunderna till hur du kan använda dig av, och implementera, BBCode på din egen sajt. Det svåra brukar vara att få själva sökningsmönstret (regex:en) rätt. Därav bifogar jag även vidare utveckling av funktionen. Denna funktion omformaterar de vanligaste BBCode-taggarna till html-taggar. Funktionen "biter på" b-, u-, i-, img- och url-taggarna. Självfallet kan funktionen också omformatera html-taggarna till BBCode-taggar genom att använda sig av den tidigare nämnda parametern $num.

<?
    function bbCode($str, $num) {
        if($num == 0) {
            return preg_replace(
                array(
                    '/\[b\](.*?)\[\/b\]/i',
                    '/\[u\](.*?)\[\/u\]/i',
                    '/\[i\](.*?)\[\/i\]/i',
                    '/\[img\](.*?)\[\/img]/i',
                    '/\[url=(.*?)\](.*?)\[\/url\]/i'
                    ),
                array(
                    '<b>$1</b>',
                    '<u>$1</u>',
                    '<em>$1</em>',
                    '<img src="$1" alt="" />',
                    '<a href="$1" rel="external">$2</a>'
                    ),
                $str
            );
        }

        if($num == 1) {
            return preg_replace(
                array(
                    '/\<b>(.*?)\<\/b\>/i',
                    '/\<u>(.*?)\<\/u\>/i',
                    '/\<em>(.*?)\<\/em\>/i',
                    '/\<img src="(.*?)" alt="" \/>/i',
                    '/\<a href="(.*?)" rel="(.*?)"\>(.*?)\<\/a\>/i'
                    ),
                array(
                    '[b]$1[/b]',
                    '[u]$1[/u]',
                    '[i]$1[/i]',
                    '[img]$1[/img]',
                    '[url=$1]$3[/url]'
                    ),
                $str
            );
        }
    }
?>

För mer läsning om BBCode rekommenderar jag artikeln om BBCode på Wikipedia. Mer utförlig information finns på engelska Wikipedia om samma ämne.

Skribent: Anton Lindqvist
http://www.w3sidan.net/profil/mptre