Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

xbbcode-parser

Package Overview
Dependencies
Maintainers
0
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

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.

  • 0.3.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
45
decreased by-75.68%
Maintainers
0
Weekly downloads
 
Created
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

Package last updated on 12 Oct 2024

Did you know?

Socket

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
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc