JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<div class="post-content">[tabulaScriptum=][/tabulaScriptum]</div>

<div class="parsedsig">[tabulaScriptum=][/tabulaScriptum]</div>

<div class="post-content">Some text.<div class="code-box">[tabulaScriptum=]some tabula content[/tabulaScriptum]</div></div>

CSS

.post-content, .parsedsig {
    border: 5px solid red;
}

.tabulaNomen {
    border: 5px solid blue;
    height: 100px;
}

JavaScript

// Temporarily render .code-box contained tabulas unrecognizable
$('.code-box').each(function () {
    var pattern = /\[tabula/gi;
        $(this).html($(this).html().replace(pattern, "[placeholder"));
});

$("div.post-content, .parsedsig").each(function () {
    if($(this).html().indexOf("[/tabulaScriptum]") != -1) {
        var pattern = /\[tabulaScriptum=(.*?)\]([^\[]*)\[\/tabulaScriptum\]/gi;
        $(this).html($(this).html().replace(pattern, "<div class='tabulaScriptum'><div class='tabulaNomen'>$1</div><div class='tabulaImpleo'>$2</div></div>"));
    }
});

// Restore .code-box contained tabulas
$('.code-box').each(function () {
    var pattern = /\[placeholder/gi;
        $(this).html($(this).html().replace(pattern, "[tabula"));
});