A BBCode Markup Parser written in pure vanilla JavaScript, which supports over 58 BBCode Tags (+ 12 Aliases, + Tag Attributes) and is also available as nodeJS and AMD (requireJS) Module.

tail.BBSolid is a expendable and easy-to-use BBCode Parser, written in vanilla JavaScript and available for your Browser, as AMD Module as well as for nodeJS! It already supports 46 BBCode Markups (+12 special markups are excluded in a separate file) and BBCode Tag Attributes as [tag attr=value], [tag attr="value"] or [tag="value"].

This script is inspired by Patorjks Extendible BBCode Parser!

The tail.BBSolid Markup Parser is currently an experimental Alpha version, and still may contains some bugs. It would be really helpful if you write us each issue and request on the official GitHub Issues Page. Thanks!

Demonstration

Features

  • 46 BBCode Tags (+ 12 Separated Special Tags) (+ 12 Aliases) (+ Attributes)
  • Parent -> Children Relationships / Restrictions
  • Valid HTML (5), no Stylesheet required!
  • Support for the latest Browsers, including Internet Explorer 9+
  • debug Shows the Errors directly in the console (including the index)
  • prettyPrint Make the Output HTML Code as pretty as possible
  • allowedHTML Define allowed HTML Tags, or dis/enable any HTML.
  • wrapParagraphs Paragraph-Wrapping around "Inline" elements
  • showLineBreaks Line Break Sequenzes within Paragraphs
  • removeUnparsed And Faulty BBCode Tags.

Usage

Smart Usage Code:

// BBSolid is an Alias for BBSolid.parse(content, config)
var HTMLContent = tail.BBSolid("[b]Your BBCode Content[/b]", {
    debug:          false,      // Writes each error directly in the console
    prettyPrint:    true,       // Try to "pretty" format the HTML Code.
    allowedHTML:    true,       // The allowed HTML Tags as Array, True to allow any, False to disable any HTML Tag
    wrapParagraphs: true,       // Wrap Content in <p> Paragraphs
    showLineBreaks: true,       // Replaces single \n within <p> Paragraphs into <br />
    removeUnparsed: false       // Remove Unparsed / Faulty BBCodes
});

// Get the latest "passed" content with
var LatestBBCodeContent = tail.BBSolid.content;

// Get the latest "parsed" content with
var LatestHTMLContent = tail.BBSolid.parsed;

// Check if the latest passed occured an Error
if(tail.BBSolid.error){
    console.log( tail.BBSolid.errors );
}

Available BBCodes

Inline Elements

BBCode Alt. Attributes Examples
[noparse] [bbcode] null [noparse] [b]Bold[/b] [/noparse]
[b] color, font, size [b]Bold[/b]
[strong] color, font, size [strong color=red]Red String[/strong]
[i] color, font, size [i font=serif]Serif Italic[/i]
[em] color, font, size [em size=12px]Small Emphasized[/em]
[u] color, font, size [u font=serif color=#000]Back Serif underlined[/u]
[ins] color, font, size [ins]Just inserted Text[/ins]
[s] color, font, size [s]Strikethroughed Text[/s]
[del] color, font, size [del size=larger]Larger Deleted Text[/del]
[sub] color, font, size [sub color="rgb(0, 255, 0)"]Green subscripted Text[/sub]
[sup] color, font, size [sup font=Arial]Arial Superscripted Text[/sup]
[big] [large] color, font, size [big]Big Text[/big]
[small] color, font, size [small]Small Text[/small]
[font] [face] font* [font=Arial]Arial Text[/font]
[font font=Times]Times Text[/font]
[size] size* [size=20px]Big Text[/size]
[size size=small]Small Text[/small]
[color] color* [color=steelblue]SteelBlue Text[/color]
[color color=#000]Black Text[/color]
[url] [link] href*, target [url]https://example.com[/url]
[url=https://example.com target=_blank]Custom Text[/url]
[img] [image] src*, alt** [img]http://image.url[/img]
[img=http://image.url]Alt Text[/img]
[mail] [email] mail* [mail]info@example.com[/mail]
[mail=info@example.com]Custom Text[/mail]
[code] null [code]Any Code, BB Tags doesn’t get parsed in here![/code]

Legende

All Attributes marked with an * can be used inline, for example:
Default:    [bbcode attribute=value][/bbcode]
Inline:     [bbcode=value][/bbode]

The 'alt**' attribute on the 'img' and 'image' tags can also used WITHIN the tags:
Default:    [img]http://www.example.com/image.png[/img]
Parameter:  [img src=http://www.example.com/image.png alt="Alternative Text"][/img]
Inline:     [img=http://www.example.com/image.png alt="Alternative Text"][/img]
Within:     [img=http://www.example.com/image.png]Alternative Text[/img]

Block Elements

Some Block elements allows only a few BBCode Tags, or requires a specific Parent BBCode Tag.

BBCode Alt. Attributes Note
[h1] [h] null First Header
[h2] null Second Header
[h3] null Third Header
[h4] null Fourth Header
[h5] null Fifth Header
[h6] null Sixth Header
[hr] null Horizontal Rule, doesn’t require an closing tag!
[left] null Left-Align Paragraph
[right] null Right-Align Paragraph
[center] null Center-Align Paragraph
[justify] null Justify-Align Paragraph
[quote] cite* Blockquote with optional cite.
[codeblock] language* Codeblock with additional language-classnames.
[table] null Allows: thead, tbody, tfoot and tr
[thead] null Allows: tr
Requires: table
[tbody] null Allows: tr
Requires: table
[tfoot] null Allows: tr
Requires: table
[tr] null Allows: th, td
Requires: table, thead, tbody or tfoot
[th] align, valign, colspan, rowspan Requires: tr
[td] align, valign, colspan, rowspan Requires: tr
[list] [ul] [ol] type* Allows: li, *
[li] [*] null * doesn’t require an closing tag!
Required: list, ul or ol
[dl] null Allows: dt, dd
[dt] null Requires: dl
[dd] null Requires: dl

Legende

All Attributes marked with an * can be used inline, for example:
Default:    [bbcode attribute=value][/bbcode]
Inline:     [bbcode=value][/bbode]

Extended Elements

You need to include the tail.bbsolid-extended.js JavaScript file, to use the following BBCode Tags. (on nodeJS: Include ONLY the extended file, but make sure, that the main file is available in the same folder as the extended file)!

BBCode Attributes Note
[address] null HTML5: Address Block
[caption] align* Table Caption
Requires: table
[mark] null HTML5: Mark some Content
[q] null HTML5: Inline Quotation
[abbr] title* Abbreviation
[acronym] title* Acronym
[dfn] title* Definition
[embed] src*, width, height Embed some Content
[audio] src*, width, height, autoplay, loop HTML5: Embed a Audio Source
[video] src*, width, height, autoplay, loop HTML5: Embed a Video Source
[youtube] src*, width, height Embed a YouTube Video, using iframe.
[spoiler] title*, close Create an Spoiler element

Legende

All Attributes marked with an * can be used inline, for example:
Default:    [bbcode attribute=value][/bbcode]
Inline:     [bbcode=value][/bbode]
This section is currently closed due to the Strict Maintenance!

Leave a Reply

avatar
  Subscribe  
Notify of
This section is currently closed due to the Strict Maintenance!
This Website use (Browser) Cookies and the (JavaScript) HTML5 Storage to store user-related informations on YOUR own computer.
The stored data are used to increase the usability and user experience on www.pytes.net only!