BBCODE To HTML - Complete Guide

BBCode to HTML converter transforms BBCode (Bulletin Board Code) markup into standard HTML. BBCode is a lightweight markup language used in forums, message boards, and community platforms for text formatting without allowing raw HTML.

How It Works

Parse BBCode tags ([b], [i], [url], [img], etc.), match opening and closing tags, and convert to HTML equivalents. Handle nested tags, attributes, and validate proper tag closure. Sanitize to prevent XSS.

Technical Details

Common BBCode: [b]bold[/b], [i]italic[/i], [u]underline[/u], [url=http://...]link[/url], [img]url[/img], [quote]text[/quote], [code]code[/code], [color=red]text[/color], [size=14]text[/size]. Case-insensitive.

Common Use Cases

1. Forum Migration: Convert forum posts to HTML.
   • Example: Migrate vBulletin to modern platform
2. Content Display: Render BBCode content as HTML.
3. Editor Preview: Show live preview of BBCode input.
4. Email Generation: Convert BBCode posts to HTML emails.

Code Examples

BBCode to HTML Conversion

// BBCode input:
const bbcode = `
[b]Bold text[/b] and [i]italic[/i]
[url=https://example.com]Click here[/url]
[img]https://example.com/image.jpg[/img]
[quote="John"]This is a quote[/quote]
[code]console.log("Hello");[/code]
[list]
[*]Item 1
[*]Item 2
[/list]
[color=red]Red text[/color]
`;

// Simple BBCode parser
function bbcodeToHtml(text) {
  const replacements = [
    [/\[b\](.*?)\[\/b\]/gi, '<strong>$1</strong>'],
    [/\[i\](.*?)\[\/i\]/gi, '<em>$1</em>'],
    [/\[u\](.*?)\[\/u\]/gi, '<u>$1</u>'],
    [/\[s\](.*?)\[\/s\]/gi, '<s>$1</s>'],
    [/\[url=(.*?)\](.*?)\[\/url\]/gi, '<a href="$1">$2</a>'],
    [/\[url\](.*?)\[\/url\]/gi, '<a href="$1">$1</a>'],
    [/\[img\](.*?)\[\/img\]/gi, '<img src="$1" alt="">'],
    [/\[quote="?(.*?)"?\](.*?)\[\/quote\]/gis, '<blockquote><cite>$1</cite>$2</blockquote>'],
    [/\[code\](.*?)\[\/code\]/gis, '<pre><code>$1</code></pre>'],
    [/\[color=(.*?)\](.*?)\[\/color\]/gi, '<span style="color:$1">$2</span>'],
    [/\[size=(.*?)\](.*?)\[\/size\]/gi, '<span style="font-size:$1px">$2</span>'],
    [/\[list\](.*?)\[\/list\]/gis, '<ul>$1</ul>'],
    [/\[\*\](.*?)(?=\[\*\]|\[\/list\])/gi, '<li>$1</li>'],
  ];

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

// HTML output:
<strong>Bold text</strong> and <em>italic</em>
<a href="https://example.com">Click here</a>
<img src="https://example.com/image.jpg" alt="">
<blockquote><cite>John</cite>This is a quote</blockquote>
<pre><code>console.log("Hello");</code></pre>
<ul><li>Item 1</li><li>Item 2</li></ul>
<span style="color:red">Red text</span>

Simple regex-based BBCode parser. Production code should use proper parsing and sanitization.

Tips & Best Practices

• Sanitize URLs to prevent javascript: XSS
• Escape HTML in text content
• Handle nested tags properly
• Support common BBCode variations
• Use established libraries for production

Common Mistakes to Avoid

• Not sanitizing URLs (XSS vulnerability)
• Failing on nested or malformed tags
• Case sensitivity issues
• Missing common tag variations
• Not escaping HTML in content

When to Use This Tool

Use BBCode to HTML converter when migrating forum content, displaying BBCode in modern applications, or building forum/community features.

Frequently Asked Questions

Is BBCode safe from XSS?

Only if properly implemented. The converter must sanitize URLs (no javascript:), escape HTML in text, and whitelist allowed tags. Don't trust user BBCode without sanitization.

What BBCode tags are standard?

Common: [b], [i], [u], [s], [url], [img], [quote], [code], [color], [size], [list]/[*]. Forums often add custom tags. No formal standard exists.

How are nested tags handled?

Tags should nest properly: [b][i]text[/i][/b] is valid. Overlapping [b][i]text[/b][/i] may cause issues. Good parsers handle both gracefully.

Why use BBCode over HTML?

Safety (restricted tags), simplicity (easier for users), consistency (no CSS injection). Forums use it to give formatting without full HTML risk.

Get Started

Ready to try BBCODE To HTML? Use the tool now - it's free, fast, and works right in your browser.

---

Last updated: June 27, 2026