使用原生js input不使用第三方库实现jsoneditor的文本框字体带不同颜色方法并且可以输入和保存拿到参数的方法有吗？-Go服务器开发

要实现文本框中不同颜色的字体效果，您可以使用原生 JavaScript 来操作 DOM 元素。以下是一个示例代码，实现了根据 JSON 数据设置文本框中字体颜色的功能：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .red {
        color: red;
      }
      .blue {
        color: blue;
      }
    </style>
  </head>
  <body>
    <textarea id="jsonEditor" rows="10" cols="50"></textarea>
    <script>
      var jsonEditor = document.getElementById('jsonEditor');
      jsonEditor.addEventListener('input', function() {
        var jsonString = jsonEditor.value;
        try {
          var jsonData = JSON.parse(jsonString);
          renderJsonData(jsonData);
        } catch (error) {
          console.error(error);
        }
      });
      function renderJsonData(data) {
        if (!data) return;
        var formattedJson = JSON.stringify(data, null, 2);
        var coloredText = formatColoredText(formattedJson);
        jsonEditor.innerHTML = '';
        jsonEditor.appendChild(coloredText);
      }
      function formatColoredText(text) {
        var coloredTextContainer = document.createElement('div');
        // 按行分割文本
        var lines = text.split('\n');
        
        // 对每一行进行处理
        for (var i = 0; i < lines.length; i++) {
          var lineElement = document.createElement('div');
          
          // 判断是否为键值对的行，并设置相应样式类
          if (lines[i].includes(':')) { 
            lineElement.classList.add('blue');
          } else {
            lineElement.classList.add('red');
          }
          lineElement.textContent = lines[i];
          coloredTextContainer.appendChild(lineElement);
        }
        return coloredTextContainer;
      }
    </script>
  </body>
</html>