JSFiddle - React, Tailwind, and code Playground

HTML

<script>
var p
var cc=['bad','good']

function f01(x,findchr){ 
if (findchr=='') {p=-1}
var f=true;
do{
  p++
  if (x[p]==findchr) {return true}
    else {
      switch(x[p]){
        case '(': f=f01(x,')'); break;
        case '<': f=f01(x,'>'); break;
        case '[': f=f01(x,']'); break;
        case '{': f=f01(x,'}'); break;
        case ')': p=x.length; return false;
        case '>': p=x.length; return false;
        case ']': p=x.length; return false;
        case '}': p=x.length; return false;               
      }
    }
  }while(p<x.length)  
return f && (findchr=='')
}


function u(){
var d=f01(gg.value,'')
w.innerHTML='Результат проверки: '+d
gg.style.borderColor=d?"gray":"red";
gg.style.color = d?'#000':'#f00';
//
}
</script>



<input type="text" value="ab{cd)}[,,,,]" size="50px" id="gg" oninput="u()">
<br>
<input type="button" id="btn" value="Проверить" onclick="u()" >
<p id="w">
</p>

CSS

#gg{
  width: 350px;
  font-family: monospace;
  font-size: 26px;
}
.good {color: #000000}
.bad {color: #ff0000}