JSFiddle - React, Tailwind, and code Playground

HTML

<button id="button">ok</button>
<textarea id="text">text</textarea>

CSS

textarea{
    width: calc(100% - 20px);
    display: block;
    height: 300px;
    border: 0px;
    box-shadow: rgb(51, 51, 51) 0px 0px 1px;
    padding: 10px;
    font-family: cursive;
    font-size: 20px;
    color: rgb(51, 51, 51);
    resize: vertical;
}
button{
      display: block;
    width: 70px;
    height: 40px;
    font-family: cursive;
    color: #333;
    margin: 5px auto;
}

JavaScript

function ba7t(txt) {
        "use strict";
    var T = "", w, i, y;
    while (txt.indexOf("[") !== -1) {
        T += txt.slice(0, txt.indexOf("["));
        txt = txt.slice(txt.indexOf("["));
        w = txt.slice(1, txt.indexOf("]"));
        i = 0;
        y = false;// عدد w
        while (i < w.length) {
            if ("0123456789".indexOf(w[i]) === -1) {
                y = true;
                break;
            }
            i += 1;
        }
        if (w === "") {y = true; }
        txt = txt.slice(txt.indexOf("]") + 1);
        if (y) {T += "[" + w + "]"; }
    }
    return T + txt;
}
var button = document.getElementById("button"),
		text = document.getElementById("text");
button.onclick = function () {
	"use strict";
  text.value = ba7t(text.value);
}