JSFiddle - React, Tailwind, and code Playground

HTML

<script>
f=a=>(s=[],b=-1,k=0,a.replace(/\d+|\[|\]/g,a=>a=='['?b++:a==']'?b--:(s[b]=s[b]||[]).push(a)),'['+s.map((a,b)=>k=a&&(k?',':'')+'['.repeat(b)+a+']'.repeat(b)).join``+']')
</script>
<textarea id = "arr" cols = "100" rows = "1" placeholder = "Array"></textarea><br/>
<textarea id = "result" cols = "100" rows = "20" placeholder = "Result"></textarea><br/>
<input id = "compute" type = "button" value = "Compute">

JavaScript

const ge = a => document.getElementById(a);
const arr = ge('arr');
const result = ge('result');
const compute = ge('compute');

compute.addEventListener('click', a => result.value = f(arr.value))