JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<textarea id="test" cols="75" rows="15">
[b]This is bold text[/b]

[i]This is italic text[/i]

[code]This is pre-formatted text[/code]

[quote]This is a quote[/quote]

[color=red]This is red text[/color]

[url]http://www.google.com/[/url]

[url=Google.com yo!]http://www.google.com/[/url]

[img]http://i.imgur.com/WqYEO.jpg[/img]

This is a list: 

[list]
[*]list item #1
[*]list item #2
[*][b]list item #3[/b]
[/list]

[youtube]http://youtu.be/DabwEqsWWiA&hd=1[/youtube]

[youtube]http://www.youtube.com/watch?v=DabwEqsWWiA[/youtube]
</textarea>

<div id="preview"></div>

CSS

#preview {
    font-family: "Courier New";
    background: #F2EAD9;
}

img {
    max-width: 500px;
}

JavaScript

var BBCodePreview = (function () {
    
    function _process (input) {
        // table will contain objects with two
        // properties -- re and sub -- which contain
        // a regex literal and function to substitute the
        // match with, respectively
        var bbcode_table = {};
        
        
        // replace [b] with <strong>
        bbcode_table.bold = {
            re: /\[b\]([\s\S]*?)\[\/b\]/ig,
            sub: function (match, p1) { return '<strong>' + p1 + '</strong>'; }
        };
        
        
        // replace [i] with <em>
        bbcode_table.italic = {
            re: /\[i\]([\s\S]*?)\[\/i\]/ig,
            sub: function (match, p1) { return '<em>' + p1 + '</em>'; }
        };
        
        
        // replace [code] with <pre>
        bbcode_table.code = {
            re: /\[code\]([\s\S]*?)\[\/code\]/ig,
            sub: function (match, p1) { return '<pre>' + p1 + '</pre>'; }
        };
        
        
        // replace [quote] with <blockquote><p>
        bbcode_table.quote = {
            re: /\[quote\]([\s\S]*?)\[\/quote\]/ig,
            sub: function (match, p1) { return '<blockquote><p>' + p1 + '<p></blockquote>'; }
        };
        
        
        // replace [s] with <del>
        bbcode_table.strikethrough = {
            re: /\[s\]([\s\S]*?)\[\/s\]/ig,
            sub: function (match, p1) { return '<del>' + p1 + '</del>'; }
        };
        
        
        // relace [color=red]...[/color] with <span style="color:red">...</span>
        bbcode_table.color = {
            re: /\[color=([#a-z0-9]+)\]([\s\S]*?)\[\/color\]/ig,
            sub: function (match, p1, p2) { return '<span style="color:' + p1 + ';">' + p2 + '</span>'; }
        };
        
        
        // replace [url] with <a href="...">...</a>
        bbcode_table.url = {
            re: /\[url\]([\s\S]*?)\[\/url\]/ig,
            sub: function (match, p1) { return '<a href="' + p1 + '">' + p1 + '</a>'; }
        };
    
        
    ...