Socket
Socket
Sign inDemoInstall

xbbcode-parser

Package Overview
Dependencies
0
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    xbbcode-parser

Allows you to parse BBCode and to extend the markup to add your own tags.


Version published
Weekly downloads
64
decreased by-42.34%
Maintainers
1
Install size
48.1 kB
Created
Weekly downloads
 

Readme

Source

Extendible-BBCode-Parser

This is an extendible BBCode parser for JavaScript.

Online demo: patorjk.com/bbcode-previewer

Why I made this

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 extensible.

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

Usage (Browser)

Including xbbcode.js will expose its API through an XBBCODE object that you can use to process BBCode into HTML.

<head>
  <!-- Optional styling for .xbbcode-* classes -->
  <link rel="stylesheet" type="text/css" href="xbbcode.css">
</head>
<body>
  <script src="xbbcode.js"></script>
  <script>
    var result = XBBCODE.process({
      text: "[b]Hello world[/b]",
      removeMisalignedTags: false,
      addInLineBreaks: false
    });
    console.error("Errors", result.error);
    console.dir(result.errorQueue);
    console.log(result.html);  //=> <span class="xbbcode-b">Hello world</span>
  </script>
</body>

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>';
    }
}

That will transform this BBCode:

[googleit]ta-da![/googleit]

Into this:

<a href="http://www.google.com/#q=ta-da!">ta-da!</a>

Refer to xbbcode.js for additional configuration options and other examples.

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

Adding 'single' tags

Simply do what you had been doing so far, but without providing an closeTag function.

Keywords

FAQs

Last updated on 30 Jan 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc