JSFiddle - React, Tailwind, and code Playground

HTML

<div class="post-content">

[tabulaScriptum=Spoiler]
   - not within THE code box
[/tabulaScriptum]
    
<div class="code-box">
[tabulaScriptum=Spoiler]
   - this
[/tabulaScriptum]

[tabulaScriptum=Spoiler]
   - and this shouldn't be processed by the script
[/tabulaScriptum]</div>
    
</div>

CSS

.code-box {margin: 10px;}

JavaScript

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

$(".tabulaNomen").click( function () {
$(this).parent().children(".tabulaImpleo").slideToggle();});