JSFiddle - React, Tailwind, and code Playground

by klaascuvelier

HTML

<div id="output"></div>

<div id="c" style="display: none">
    
    <div data-shoutid="{shoutId}" class="shoutTab shoutTabExpanded <!-- IF preRendered!="1" -->invisible<!-- ENDIF -->" id="shout-{shoutId}">
    <a href="#" class="shoutClose">
        <img src="/static/img/blank.gif" class="icon iconCloseAlt" />
    </a>
    <div class="shoutContentWrapper">
    
        <div class="shoutDetailsContent <!-- IF type!="1" -->shoutDetailsContentWithMedia<!-- ENDIF -->" <!-- IF type != "1" --> style="display:none;" <!-- ENDIF --> >
            <div class="shout p10">
                
                <!-- IF firstPost == "1" -->
                    <img src="/static/img/blank.gif" class="img imgFirst" /> 
                <!-- ENDIF -->
                <a data-userid="{shouterId}" href="#!/{shouterNickname}" class="avatar avatarLarge rad8 left" style="background-image: url({shouterAvatar});">
                    <img src="{shouterAvatar}" />
                    <span class="avatarName"><span>{shouterNickname}</span></span>
                    <span class="avatarAge {shouterGender} radMax" <!-- IF showAge == "0" --> style="display:none" <!-- ENDIF -->>{shouterAge}</span>
                </a>
                <span class="shoutContent rad8" style="background-image: url({previewPic});">
                    <ul class="shoutStats right">
                        <li class="rad4 counterComments"><span>{counterComments}</span> <img src="/static/img/blank.gif" class="icon icon20 iconComment" /></li>
                        <li class="rad4 counterViews"><span>{counterViews}</span> <img src="/static/img/blank.gif" class="icon icon20 iconViewAlt" /></li>
                    </ul>
                    <span class="shoutText left">
                        <span>{ellipsedText}</span>
                    </span>
                    
                    <span class="videoTitle" style="display:{videoDisplay};">
                        <img src="/static/img/blank.gif" class="icon iconVideo"...

JavaScript

function test(content)
{
    var expr = new RegExp('(<!-- IF ["a-zA-Z0-9_.!=<>\\s]+ -->[\\s\\S]*?)+' +
                          '(<!-- ELSE IF ["a-zA-Z0-9_.!=<>\\s]+ -->[\\s\\S]*?)?' + 
                          '(<!-- ELSEIF ["a-zA-Z0-9_.!=<>\\s]+ -->[\\s\\S]*?)?' + 
                          '(<!-- ELSE -->[\\s\\S]*?)?' 
                          + '<!-- ENDIF -->', 'im');

            var results = expr.exec(content);
    var incr = 0;
            while (results != null && ++incr < 50)
            {
                console.log(results[0]);
                var i, len, code = '';
                for (i = 1, len = results.length; i < len; i++)
                {
                    var statement = results[i];
                    if (typeof statement !== 'undefined')
                    {
                        // position for splitting into condition and output
                        var position = statement.indexOf('-->');
                        var condition = statement.substr(4, position - 5).trim().replace('AND', '&&').replace('OR', '||').replace('ELSEIF', 'else if')
                        var output = statement.substr(position + 3).trim();
                     
                        var conditionElseIf = condition.substr(0, 7).toLowerCase() === 'else if';
                        var conditionElse = condition.substr(0, 4).toLowerCase() === 'else';
                     
                        position = conditionElseIf ? 7 : condition.indexOf(' ');
                        var operation = position === -1 ? '' : condition.substr(position).trim();
                        
                        // there is no lookbehind in JS, so also fetch char in front of regexp
                        var variablesExpr = new RegExp('(["a-z0-9_\-]+)(?!")', 'gi');
                        var variables = variablesExpr.exec(operation)
                           
                            var zzz = 0;
                        while (variables !== null && ++zzz < 10)
      ...