JSFiddle - React, Tailwind, and code Playground

by Andrew Gerst

HTML

<div id="results"></div>

CSS

/* colors http://static1.squarespace.com/static/4ea18496d09aa9e3f3299a86/t/5183b2c7e4b0b930f1c7200b/1367585480618/Flat+UI+Colors+(20130503).png */

.color_turquoise { color: #20b08a; }
.color_emerland { color: #2cc55e; }
.color_peterriver { color: #2b84d1; }
.color_amethyst { color: #8740a7; }
.color_wetasphalt { color: #28384b; }

.color_greensea { color: #1a9072; }
.color_nephritis { color: #25a34e; }
.color_belizehole { color: #226bab; }
.color_wisteria { color: #7a2b9d; }
.color_midnightblue { color: #212f3e; }

.color_sunflower { color: #ecb910; }
.color_carrot { color: #dd6a1b; }
.color_alizarin { color: #df342f; }
.color_clouds { color: #e7edee; }
.color_concrete { color: #839595; }

.color_orange { color: #ee8a12; }
.color_pumpkin { color: #c63e05; }
.color_pomegranate { color: #b02521; }
.color_silver { color: #b0b6bb; }
.color_asbestos { color: #6b7a7a; }

JavaScript

var data = [
    ' V7:PPMobile->removeDuplicateRates[PPMobile.class.php:7981]: testscf: pruned (Max Purchase: 2 Hours: 200 == 2 Hour Max (until 4:12 PM on Thursday): 200) = true',
    ' V7:PPGlobal::getOperatorSettings[PPGlobal.class.php:3092]: QUERY => SELECT `key`, value FROM default_operator_settings WHERE country_iso_code = \'US\' AND internalonly = 0 AND version = \'7\' LIMIT 200',
    ' V7:GLOBAL[index.php:30]: method file name => methods/getrateshortcuts.php',
    ' V7:PPStrings::getStringsUrl[PPStrings.class.php:156]: Url =>',
    ' V7:PPStrings::getStringsUrl[PPStrings.class.php:156]: URL',
    ' V7:PPConfirmation->__construct[PPConfirmation.class.php:124]: locale => en'
];
var re = / V\d+:/;
var lineRegex = /((\w*)(->|::|GLOBAL)(\w*))(\[)(.*)(:)(\d*)(\])(:)((.*)( =>)(.*))?(.*)/;

function buildLine(line) {
    var newline = [];
    newline.push('<div>');
    var matches = line.match(lineRegex);
    if (matches && matches.length) {
        if (matches[1] === 'GLOBAL' && matches[3] === 'GLOBAL') {
            newline.push('<span class="color_turquoise">GLOBAL</span>');
        } else {
            newline.push('<span class="color_emerland">', matches[2], '</span>');
            newline.push('<span>', matches[3], '</span>');
            newline.push('<span class="color_peterriver">', matches[4], '</span>');
        }
        newline.push('<span>', matches[5], '</span>');
        newline.push('<span class="color_orange">', matches[6], '</span>');
        newline.push('<span>', matches[7], '</span>');
        newline.push('<span class="color_wetasphalt">', matches[8], '</span>');
        newline.push('<span>', matches[9], '</span>');
        if (!matches[11]) {
            newline.push('<span class="color_pomegranate">', matches[10], '</span>');
            newline.push('<span class="color_midnightblue">', matches[15], '</span>');
        } else {
            newline.push('<span>', matches[10], '</span>');
            newline.push('<span...