While replacing the red colored text which surrounded with square brackets of red color.The replaced text should be in black but it turns out be red. How do I fix this

The below code checks for the word with square brackets and if there are, replace those with red color in a textbox(textbox implemented using contenteditable)

if we want to replace those red colored words with other data in a textbox , then while updating it should be in black. If I go one space before of that square bracket word and try to enter something then only it will be in black otherwise it will be in red

  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>`);

  }