Skip to main content
2 of 4
clarification
qarz
  • 421
  • 2
  • 7

Translate BBCode into HTML

BBCode is a markup language commonly used in webforum software in the 2000s and 2010s. Your task is to write a program or function that translates BBCode to HTML according to the following spec. (BBCode has wildly varying implementations in the real world, but for this challenge we're defining it like this):

Tags

  • [b]foo[/b]<strong>foo</strong>
  • [i]foo[/i]<em>foo</em>
  • [u]foo[/u]<u>foo</u>
  • [s]foo[/s]<s>foo</s>
  • [code]foo[/code]<code>foo</code>. Tags inside [code] are not parsed.
  • [url]https://www.example.com[/url]<a href="https://www.example.com">https://www.example.com</a>
  • [url=https://www.example.com]foo[/url]<a href="https://www.example.com">foo</a>
  • [img]https://www.example.com[/img]<img src="https://www.example.com"> (no HTML closing tag)
  • [color=value]foo[/color]<span style="color:value">foo</span>
  • [size=value]foo[/size]<span style="font-size:value">foo</span>
  • [quote]foo[/quote]<blockquote>foo</blockquote>
  • [quote=author]foo[/quote]<blockquote><cite>author</cite>foo</blockquote>

Details

  • BBCode tags are case insensitive [b][/b] and [B][/b] and [B][/B] are all valid), but HTML output tags must be lowercase.
  • Nested tags are valid (see Nesting section for further details): [b][i]text[/i][/b]<strong><em>text</em></strong>
  • Unmatched, malformed, or unknown tags are left as literal text: [b]foo[b]foo, [b ]foo[/b][b ]foo[/b], [/b][/b], [bar]foo[/bar][bar]foo[/bar]
  • All attributes are valid; don't worry about URI validation, color/size name validation, anti-XSS, etc.
  • Empty tags are valid: [b][/b]<strong></strong>

Input attributes and input text inside (valid) tags will not contain[, ], =, or ".

Nesting

Tags close in LIFO order (like a stack).

Inputs will always have properly nesting tags.

Test cases

Input: [b]bold[/b]
Output: <strong>bold</strong>

Input: [B]BOLD[/B]
Output: <strong>BOLD</strong>

Input: [b][i]bold italic[/i][/b]
Output: <strong><em>bold italic</em></strong>

Input: [url]http://example.com[/url]
Output: <a href="http://example.com">http://example.com</a>

Input: [url=http://example.com]click here[/url]
Output: <a href="http://example.com">click here</a>

Input: [img]http://example.com/image.png[/img]
Output: <img src="http://example.com/image.png">

Input: [color=red]red text[/color]
Output: <span style="color:red">red text</span>

Input: [size=20px]big text[/size]
Output: <span style="font-size:20px">big text</span>

Input: [quote]someone said this[/quote]
Output: <blockquote>someone said this</blockquote>

Input: [quote=John]someone said this[/quote]
Output: <blockquote><cite>John</cite>someone said this</blockquote>

Input: [b]unclosed tag
Output: [b]unclosed tag

Input: unopened tag[/b]
Output: unopened tag[/b]

Input: [unknown]text[/unknown]
Output: [unknown]text[/unknown]

Input: [b]nested [i]tags[/i] work[/b]
Output: <strong>nested <em>tags</em> work</strong>

Input: [url=http://test.com][b]bold link[/b][/url]
Output: <a href="http://test.com"><strong>bold link</strong></a>

Input: plain text with no tags
Output: plain text with no tags

Input: [code]<script>alert('hi')</script>[/code]
Output: <code><script>alert('hi')</script></code>

Input: [CoLoR=blue]case test[/color]
Output: <span style="color:blue">case test</span>

Input: [code][b]not bold[/b][/code]
Output: <code>[b]not bold[/b]</code>

Input: [code][url=http://test.com]link[/url][/code]
Output: <code>[url=http://test.com]link[/url]</code>

Input: [b][code]tags[/code] outside[/b]
Output: <strong><code>tags</code> outside</strong>

Input: [b][i][u]triple nested[/u][/i][/b]
Output: <strong><em><u>triple nested</u></em></strong>

Input: [color=red][b]colored bold[/b][/color]
Output: <span style="color:red"><strong>colored bold</strong></span>

Input: [quote=Alice][b]bold quote[/b][/quote]
Output: <blockquote><cite>Alice</cite><strong>bold quote</strong></blockquote>

Input: [url=http://test.com][color=blue]styled link[/color][/url]
Output: <a href="http://test.com"><span style="color:blue">styled link</span></a>

Input: [code][code]nested code[/code][/code]
Output: <code>[code]nested code[/code]</code>

Input: plaintext
Output: plaintext

This is . Standard loopholes are forbidden.

qarz
  • 421
  • 2
  • 7