JSFiddle - React, Tailwind, and code Playground

HTML

<textarea>Bananas! Apples and pears walk down pyjamas the street! and they say pyjamas hi to eachother, pyjamas But then! some one else comes pyjamas along pyjamas Who is he?, pyjamas I don't know who! he is pyjamas whatever,,</textarea>

<h1>OUTPUT</h1>
<div id="output"><pre></pre></div>

CSS

textarea {
    width: 95%;
    height: 90px;
}

#

JavaScript

function indent(str)
{
    var tabs = function(n) { return new Array(n+1).join('\t'); }

    var tokens = str.match(/!|,|pyjamas|(?:(?!pyjamas)[^!,])+/g);
    var depth = 0;
    var result = '';
    for (var i = 0; i < tokens.length; ++i)
    {
        var token = tokens[i];
        switch(token)
        {
        case '!':
            ++depth;
            result += token + '\n' + tabs(depth);
            break;
        case ',':
            --depth;
            result += '\n' + tabs(depth) + token;
            break;
        case 'pyjamas':
            result += token + '\n' + tabs(depth);
            break;
        default:
            result += token;
            break;
        }
    }
    return result;
}

$("#output>pre").html(indent($("textarea").val()));

$("textarea").keyup(function() {
    $("#output>pre").html(indent($("textarea").val()));
});