JSFiddle - React, Tailwind, and code Playground

by ScottRippey

HTML

<label> Input: </label>
<br />
<textarea id="txtInput" rows=10 cols=70>abc, 
(def {g, hi} j, kl), 
mno 'pqr, (stu) ',
[vwx, yz] zzz</textarea>

<br />

<label> Results: </label>
<div id="results">   
</div>

CSS

.result{
    float:left;
    margin:2px;
    padding:4px;
    border: 1px solid #008;
    background: #EEF;
}

JavaScript

// Tests:
var delayed;
$("#txtInput").bind("change keyup input paste", function(){
    clearTimeout(delayed);
    delayed = setTimeout(CreateResults, 1000);
    $("#results").children().animate({opacity:0.5});
}).change();

var lastInput = "";
function CreateResults(){
    var input = $("#txtInput").val();
    if (input === lastInput) return;
    lastInput = input;
    var results = SplitBalanced(input, "[,]");
    results = $(results).map(function(i,r){ return $("<div class='result' />").text(r)[0]; });
    $("#results").html(results);
}


// Here's the full SplitBalanced function:

function SplitBalanced(input, split, open, close, toggle, escape) {
    // Build the pattern from params with defaults:
    var pattern = "([\\s\\S]*?)(e)?(?:(o)|(c)|(t)|(sp)|$)" 
                    .replace("sp", split)
                    .replace("o", open || "[\\(\\{\\[]")
                    .replace("c", close || "[\\)\\}\\]]")
                    .replace("t", toggle || "['\"]")
                    .replace("e", escape || "[\\\\]");
    var r = new RegExp(pattern, "gi");
    var stack = [];
    var buffer = [];
    var results = [];
    input.replace(r, function($0,$1,$e,$o,$c,$t,$s,i){
        if ($e) { // Escape
            buffer.push($1, $s || $o || $c || $t);
            return;
        }
        else if ($o) // Open
            stack.push($o);
        else if ($c) // Close
            stack.pop();
        else if ($t) { // Toggle
            if (stack[stack.length-1] !== $t)
                stack.push($t);
            else
                stack.pop();
        }
        else { // Split (if no stack) or EOF
            if ($s ? !stack.length : !$1) {
               buffer.push($1);
               results.push(buffer.join(""));
               buffer = [];
               return;
            }
        }
        buffer.push($0);
    });
    return results;
}