O BBCode é um recurso amplamente utilizado em fóruns. Ele permite editar textos de forma simples e rápida, sendo de fácil compreensão inclusive para leigos em HTML.
Neste post mostrarei como criar alguns BBCodes mais usados, como [b] (negrito), [i] (itálico), [img] (imagem), [url] (link), (para vídeos do youtube) e outros.
Como Funciona o BBCode
Basicamente, o que precisamos para montar o sistema de BBCode é usar funções de reposicionamento (replace) de textos, utilizando Expressões Regulares (ER’s), a fim de modificar apenas uma parte da string, sem perder o dado principal contido nela – o conteúdo a ser exibido com formatação.
Vamos começar com exemplos simples.
BBCode para Negrito e Itálico
1 2 3 4 5 6 7 8 9 | // exemplo 1 $str = 'exemplo de texto em [b]negrito[/b] para testar BBCode'; $str = preg_replace( "/\[b\](.*?)\[\/b\]/i", "<strong>$1</strong>", $str ); echo $str; // exemplo 2 $str = 'exemplo de texto em [b]negrito[/b] para testar BBCode'; $str = preg_replace( "/\[(\/)?b\]/i", "<$1strong>", $str ); echo $str; |
A vantagem do primeiro exemplo é que, se o usuário esquecer de fechar a tag, por exemplo, o texto não ficará totalmente em negrito. Teste o segundo exemplo com a string abaixo e veja o resultado.
1 | $str = 'exemplo de texto em [b]negrito[/b para testar BBCode'; |
A ER irá casar (match) com “[b]”, inserindo a tag . Porém, não encontrará o fechamento “[/b]”, para inserir a tag . Assim, todo o texto seguinte ficará em negrito.
O BBCode para itálico é praticamente igual. Basta mudar [b] para [i] e para .
BBCode para Imagens
Para inserir imagens, geralmente é usada a seguinte sintaxe:
1 | [img]http://url_da_imagem.jpg[/img] |
Nesse caso, usaremos o seguinte trecho para transformarmos o BBCode em HTML:
1 2 3 | $str = '[img]http://www.inf.ufpr.br/rbc08/linux_user_id.png[/img]'; $str = preg_replace( "/\[img\](.*?)\[\/img\]/i", "<img src="\"$1\"" alt="\"texto_alternativo\"" />", $str ); echo $str; |
A ER captura o conteúdo entre as tags [img] e [/img] e o insere no atributo src da tag img.
BBCode para Links
Vamos assumir que o BBCode para link seja da seguinte forma:
[url=http://url_desejada]Texto que será exibido como link[/url]
Para essa situação, devemos casar duas string: a URL e o texto a ser exibido. Logo, usaremos o seguinte código:
1 2 3 | $str = '[url=http://www.rberaldo.com.br]Blog do Beraldo[/url]'; $str = preg_replace( "/\[url=(.*?)\](.*?)\[\/url\]/i", "<a href="\"$1\"" target="\"blank\"">$2</a>", $str ); echo $str; |
Adicionei o atributo target para evitar que o link seja exibido na mesma página. Você pode retirá-lo. Também pode adicionar outros atributos, como rel, a fim de definir a relação do link com sua página.
BBCode para Texto Colorido
Para colorir textos, usaremos o BBCode [color=cor_desejada][texto[/color].
1 2 3 | $str = '[color=red]texto vermelho[/color]'; $str = preg_replace( "/\[color=(.*?)\](.*?)\[\/color\]/i", "$2", $str ); echo $str; |
É possível usar nomes de cores, como green, red, blue, black etc, ou o código hexadecimal dela, no padrão #123456.
BBCode para Vídeos do Youtube
O Youtube disponibiliza em sua página o código-fonte do vídeo exibido, a fim de permitir que você o insira em sua página. Logo, também podemos criar um BBCode para inserir vídeos, bastando inserir o código embed (incorporar) mostrado na página do Youtube, junto ao player do vídeo, como mostra a imagem abaixo:
O código para postagem é basicamente este:
<object width="425" height="344"> <param name="movie" value="http://www.youtube.com/v/codigo_do_video" /> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <embed src="http://www.youtube.com/v/codigo_do_video" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="allowfullscreen" width="425" height="344" /></object> |
Logo, basta inserirmos o código do vídeo onde está a string “codigo_do_video”.
1 2 3 | // string que será usada no reposicionamento $replace = " <object width="\"425\"" height="\"344\""> <param name="\"movie\"" value="\"http://www.youtube.com/v/$1\"" /> <param name="\"allowFullScreen\"" value="\"true\"" /> <param name="\"allowscriptaccess\"" value="\"always\"" /> <embed src="\"http://www.youtube.com/v/$1\"" type="\"application/x-shockwave-flash\"" allowscriptaccess="\"always\"" allowfullscreen="allowfullscreen" width="\"425\"" height="\"344\"" /></object>"; $str = '[youtube]http://www.youtube.com/watch?v=YaXLlyEm4kQ&feature=rec-HM-r2[/youtube]'; $str = preg_replace( "/\[youtube\].+?watch\?v=([^&]+).*?\[\/youtube\]/i", $replace, $str ); echo $str; |
Criei a variável $replace para facilitar a visualização do código que será usado no replace. A ER desse exemplo é um pouco mais complexa, mas não é tão difícil de compreendê-la. “.+?” casa com “http://” até qualquer coisa antes de “watch”. “([^&]+)” pega o código do vídeo, que não pode contar o caractere “&”, que é o delimitador de variáveis da URL. Após o código do vídeo, pode ou não haver outras variáveis, por isso termina-se com “.*?”.
Lógica semelhante pode ser usada para Google Vídeos ou outros sites afins.
É possível criar BBCodes para diversas outras finalidades. Basta ter criatividade e conhecimento de ER’s, para saber montar as regras de reposicionamento.
Alguns links interessantes:
Guia sobre Expressões Regulares
Documentação da função preg_replace
Roberto Beraldo
Latest posts by Roberto Beraldo (see all)
- Não Tenha Preguiça de Ler! - 25/04/2016
- Como Atualizar Scripts PHP de MySQL Para MySQLi - 29/10/2015
- Como usar PDO com banco de dados MySQL - 10/09/2015
Sou Roberto Beraldo (ou apenas Beraldo), desenvolvedor PHP há mais de 15 anos, numa jornada de desenvolvimento para me aprofundar no mundo DevOps e Cloud. Bacharel em Ciência da Computação, com uma base sólida em desenvolvimento web e conhecimentos em DevOps e Computação em Nuvem. Estou dedicado a conectar o desenvolvimento de software com a gestão de infraestrutura.