Extendible BBCode Parser – A JS based BBCode Parser

Extended BBCode Parser

The Extendible BBCode Parser, written by Patorjk, renders BBCode on the fly into valid HTML. The advantages, compared to other parser engines, are the error reporting (including incorrect parent-child relationships), support for nested BBCodes of the same type as well as support for the “official” BBCode list format and an really easy extendable environment.

The main drawback is the usage of `<span>` elements instead of the respective and correct HTML Tags. For Example: Patorjks parser doesn’t render [b]Bold Text[/b] into <b>Bold Text</b>, rather in <span class="xbbcode-b">Bold Text</span>, which requires additional CSS Codes / an additional Stylesheet.

Download the latest version of Extended BBCode Parser as .ZIP or as .TAR package!

npm i xbbcode-parser --save

yarn add xbbcode-parser --save

Instructions

The Extendible BBCode Parser package contains the respective JavaScript file as well as the Stylesheet. The script is completely written in Vanilla JavaScript, so requires no dependencies!

 

Load XBBCode

The stylesheets should be linked within the HTML header, the JavaScript can be located wherever you want, but we recommend to load it immediately after the started <body> tag. It’s theoretically also possible to re-write all BBCode parsing tags in order to use the valid HTML Elements, which requires no styles in the most cases!

<DOCTYPE html>
<html>
    <head>
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/xbbcode.css" />
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/xbbcode.js"></script>
    </body>
</html>

 

Init XBBCode

No we just need to Feed the XBBCode script with some… well… BBCoded content, and tell him where he should print the HTML output. To make sure, that everything is loaded before we parse everything, we wrap our code within the “DOMContentLoaded” event.

document.addEventListener("DOMContentLoaded", function(){
    var result = XBBCODE.process({
        text: "[b]My [i]BBCode[/i]![/b]"
    });
    document.querySelector(".output").innerHTML = result.html;
});

 

Configure XBBcode

The Extendible BBCode Parser just allows 3 settings, besides the main text variable:

XBBCODE.process({
    text: "",
    removeMisalignedTags: undefined,
    addInLineBreaks: undefined,
    escapeHtml: undefined
});

 

Configure: XBBCode

text
The main, required, configuration key, where you pass the BBCode-text to get parsed!
removeMisalignedTags
Set this variable to true, to remove the faulty, not yet parsed BBCode Tags.
addInLineBreaks
Set this variable to true, to wrap the HTML Content into an pre-wrapped container.
escapeHtml
Set this variable to false, to convert non-parsed and therefore encoded brackets (&#91; and &#93;) back into the respective characters ([ and ])

2 thoughts on “Extendible BBCode Parser – A JS based BBCode Parser

Leave a Reply

Top