Mientras reemplaza el texto de color rojo que estaba rodeado de corchetes de color rojo. El texto reemplazado debe estar en negro pero resulta ser rojo. Cómo puedo solucionar esto

El siguiente código busca la palabra entre corchetes y, si los hay, los reemplaza con el color rojo en un cuadro de texto (el cuadro de texto se implementa con contenteditable)

si queremos reemplazar esas palabras de color rojo con otros datos en un cuadro de texto, entonces, mientras se actualiza, debe estar en negro. Si voy un espacio antes de esa palabra entre corchetes e intento ingresar algo, entonces solo estará en negro; de lo contrario, estará en rojo.

 if (event.match(/([^[]+(?=]))/g)) { { var newTxt = event.split('['); let sampleText = event; for (var i = 1; i < newTxt.length; i++) { let value = newTxt[i].split(']')[0]; console.log(value, "matchhh"); sampleText = this.replacecanned(sampleText, `[${value}]`, `<span style="background: yellow;">[${value}]</span>`); }