我建议在这里使用more react而不是本机js，特别是对于该组件的状态管理，我可能有点过火，但我将您的组件更新为以下内容：

const Text = () => {
  const [input, setInput] = React.useState('');
  const [output, setOutput] = React.useState('');
  const mapObj = {
    blue: "azul", 
    green: "verde", 
    yellow: "amarillo" 
  };

  const changeText = (e) => {
    e.preventDefault();
    const changedText = input.replaceAll(
      /\b(blue|green|yellow)\b(|,.$)/gi,
      (matched) => `<span class="mark">${mapObj[matched]}</span>`
    )
    setOutput(changedText);
  }
  return (
    <form>
      <textarea 
        id="inputF" 
        value={input} 
        onChange={(e) => setInput(e.target.value)}
      />
      <button type="submit" onClick={changeText}>Change</button> 
      <div 
        id="outputF"
        dangerouslySetInnerHTML={{__html: output}}
      />
    </form>
  );
};

小提琴：https://jsfiddle.net/3tc2xzms/
首先，我加了2 useState 钩子来管理输入和输出文本。然后对于突出显示部分，每个被更改的匹配单词都被 Package 在一个 span.mark . 输出文本区域也被更改为div。
相关文件：
形式：https://reactjs.org/docs/forms.html
州钩：https://reactjs.org/docs/hooks-state.html
将字符串设置为html：https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

应用的样式将更改整个场景的背景色 textarea ，你可以做的是使用 setSelectionRange() textarea的方法，这将使您得到接近预期的结果。

function changeText() {
      inputText = document.querySelector("#inputF");
      document.getElementById("outputF").innerHTML = inputText.value.replaceAll(/\b(blue|green|yellow)\b(|,.$)/gi,
      function(matched){
      return mapObj[matched];
    })
    // something like this
    // here you need to set start and end index for the highlights part, you can use the logic as per need
    outputF.setSelectionRange(0, inputText.value.length )
    }

要更改突出显示颜色，可以使用以下css：

::selection {
  color: red;
  background: yellow;
}

::-moz-selection { /* Code for Firefox */
  color: red;
  background: yellow;
}