JSFiddle - React, Tailwind, and code Playground

JavaScript

var BBCodeHTML = function() {
  var me = this;            // stores the object instance
  var token_match = /{[A-Z_]+[0-9]*}/ig;

  var tokens = {

    'CODE' : '(.*?)'

  };

  var bbcode_matches = [];    
  var html_tpls = [];       
  var html_matches = [];       
  var bbcode_tpls = [];    


  var _getRegEx = function(str) {
    var matches = str.match(token_match);
    var nrmatches = matches.length;
    var i = 0;
    var replacement = '';

    if (nrmatches <= 0) {
      return new RegExp(preg_quote(str), 'g'); 
    }

    for(; i < nrmatches; i += 1) {
      var token = matches[i].replace(/[{}0-9]/g, '');
      if (tokens[token]) {
        replacement += preg_quote(str.substr(0, str.indexOf(matches[i]))) + tokens[token];
        str = str.substr(str.indexOf(matches[i]) + matches[i].length);
      }
    }
    replacement += preg_quote(str);  
    return new RegExp(replacement, 'gi');
  };


  var _getTpls = function(str) {
    var matches = str.match(token_match);
    var nrmatches = matches.length;
    var i = 0;
    var replacement = '';
    var positions = {};
    var next_position = 0;

    if (nrmatches <= 0) {
      return str;     
    }

    for(; i < nrmatches; i += 1) {
      // Remove {, } and numbers from the token so it can match the
      // keys in tokens
      var token = matches[i].replace(/[{}0-9]/g, '');
      var position;

      // figure out what $# to use ($1, $2)
      if (positions[matches[i]]) {
        position = positions[matches[i]];  
      } else {
        next_position += 1;
        position = next_position;
        positions[matches[i]] = position;
      }

      if (tokens[token]) {
        replacement += str.substr(0, str.indexOf(matches[i])) + '$' + position;
        str = str.substr(str.indexOf(matches[i]) + matches[i].length);
      }
    }

    replacement += str;

    return replacement;
  };


  me.addBBCode = function(bbcode_match, bbcode_tpl) {
    bbcode_matches.push(_getRegEx(bbcode_match));
   ...