BBCode to HTML Conversion: Forum Markup Guide

BBCode (Bulletin Board Code) is a lightweight markup language used in forums and message boards. Learn how to convert BBCode to HTML.

What is BBCode?

BBCode uses square brackets for tags instead of angle brackets, making it safer for user-generated content while providing formatting options.

Common BBCode Tags

Text Formatting

BBCode	HTML	Result
[b]bold[/b]	bold	bold
[i]italic[/i]	italic	italic
[u]underline[/u]	underline	underline
[s]strike[/s]	strike	strike

Links and Images

[url]https://example.com[/url]
[url=https://example.com]Link Text[/url]
[img]https://example.com/image.jpg[/img]

Converts to:

<a href="https://example.com">https://example.com</a>
<a href="https://example.com">Link Text</a>
<img src="https://example.com/image.jpg">

Lists

[list]
[*]Item 1
[*]Item 2
[*]Item 3
[/list]

[list=1]
[*]First
[*]Second
[/list]

Converts to:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

Quotes and Code

[quote]This is a quote[/quote]
[quote=John]John said this[/quote]
[code]console.log("Hello");[/code]

Converts to:

<blockquote>This is a quote</blockquote>
<blockquote><cite>John</cite>John said this</blockquote>
<pre><code>console.log("Hello");</code></pre>

Colors and Sizes

[color=red]Red text[/color]
[size=20]Large text[/size]

Converts to:

<span style="color: red">Red text</span>
<span style="font-size: 20px">Large text</span>

JavaScript Converter

function bbcodeToHtml(bbcode) {
  const replacements = [
    [/[b](.*?)[/b]/gi, '<strong>$1</strong>'],
    [/[i](.*?)[/i]/gi, '<em>$1</em>'],
    [/[u](.*?)[/u]/gi, '<u>$1</u>'],
    [/[url](.*?)[/url]/gi, '<a href="$1">$1</a>'],
    [/[url=(.*?)](.*?)[/url]/gi, '<a href="$1">$2</a>'],
    [/[img](.*?)[/img]/gi, '<img src="$1">'],
    [/[quote](.*?)[/quote]/gi, '<blockquote>$1</blockquote>'],
    [/[code](.*?)[/code]/gi, '<pre><code>$1</code></pre>'],
  ];

  let html = bbcode;
  for (const [pattern, replacement] of replacements) {
    html = html.replace(pattern, replacement);
  }
  return html;
}

Security Considerations

• Sanitize output to prevent XSS
• Validate URLs in link tags
• Limit allowed tags
• Escape HTML entities

Try Our Conversion Tools

• BBCode to HTML - Convert BBCode markup
• HTML Encoder - Encode HTML entities
• Markdown to HTML - Alternative markup

Conclusion

BBCode remains popular in forums. Understanding conversion helps migrate content and build forum features.