Skip to content

Allows you to parse BBCode and to extend the markup to add your own tags. All major tags are supported and parser reports back any errors it finds.

Notifications You must be signed in to change notification settings

cwilldev/Extendible-BBCode-Parser

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 

Repository files navigation

This is an extendible BBCode parser for JavaScript. You can see an online demo of this 
code at http://patorjk.com/bbcode-previewer/

I had looked around a little bit and noticed that the existing JavaScript BBCode parsers 
had at least a few of the following issues:

- They didn't report errors on misaligned tags (e.g., [b][u]test[/b][/u]).
- They couldn't handle tags of the same type that were nested within each other (e.g., 
  [color=red]red[color=blue]blue[/color]red again[/color]). This happens because their 
  regex will look for the first closing tag it can find.
- They couldn't handle BBCode's list format (e.g., [list][*]item 1[*]item 2[/list]).
- They didn't report errors on incorrect parent-child relationships (e.g., 
  [list][td]item 1?[/td][/list]).
- They weren't easily extendible.

So I wrote this module in an attempt to solve these issues.

* Using the parser

To use the use the parser, you'd simply include the xbbcode.js and xbbcode.css files 
somewhere on your page, and then call the XBBCODE object from somewhere in your JavaScript. 
Example:

var result = XBBCODE.process({
    text: "Some bbcode to process here",
    removeMisalignedTags: false,
    addInLineBreaks: false
});
console.log("Errors: " + result.error);
console.dir(result.errorQueue);
console.log(result.html);// the HTML form of your BBCode

* Adding new tags

To add a new tag to your BBCode, add properties to the "tags" object inside of the XBBCODE 
object. For example, say you wanted to add a tag called [googleit] which would change its 
contents into a link of its google search results. You'd implement that by adding this to 
the tags object:

"googleit": {
    openTag: function(params,content) {
        var website = "\"http://www.google.com/#q= " + content + '"';
        return '<a href=' + website + '>';
    },
    closeTag: function(params,content) {
        return '</a>';
    }
}

Then you could have BBCode like this: "[googleit]ta-da![/googleit]" which would be 
transformed into this: "<a href=" http://www.google.com/#q=ta-da! ">ta-da!</a>"

New tags have have properties/methods in addition to openTag and closeTag. See xbbcode.js 
for more details.

Hopefully this will be somewhat useful for you. If you have any suggestions or find any 
bugs please let me know.

About

Allows you to parse BBCode and to extend the markup to add your own tags. All major tags are supported and parser reports back any errors it finds.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 90.7%
  • CSS 9.3%