input框可编辑而且显示不同颜色字体以及相关特殊样式

在实际项目开发中，遇到过业务人员提出想要在input框输入内容以后，遇到特殊字符要显示特殊颜色，项目本身使用的前端是vue3 + element-plus 想要直接通过修改css或者其他特殊方式直接修改el-input内的颜色，一直没有调查到合适的方法，但是经过调查，研究出以下方案，希望对大家有所帮助，请指教！！！

具体方案：

step1. 首先设置一个可编辑的div区域并仿照el-input的样式，对应做出修改

<el-row>
    <div
     v-if="reloadDivData"
     id="inputContent"
     class="edit"
     placeholder="请在这输入内容"
     contenteditable="true"
     v-html="editDivHtml"
     style="width: 90%; border: 1px solid var(--el-border-color)"
     ref="editDivArea"
     @blur="getEditDivHtmlValue($event, item)"></div>
</el-row>

step2.并设置相关属性

// 可编辑div区域刷新
const reloadDivData = ref(true);
// 可编辑div区域ref
const editDivArea = ref(null);

step3. 可以绑定一个输入的事件，在输入的过程中就可以获取到div的内容

// 绑定输入的事件，在输入的时候获取到div的内容 
const testEditDivSearchRes = () => {
  const firstEditDiv = document.getElementById("firstInputEditContent");
  if (firstEditDiv != null) {
    firstEditDiv.addEventListener("input", function () {
      let inputContext: any = firstEditDiv.textContent;
      if (inputContext != "" && inputContext != null) {
        inputContext = inputContext.toString();
        currentTestTableValue.value = _.filter(_.toArray(testNewComponentDataList),                         
        function (o) {
          return o.feeCode.includes(inputContext);
        });
      } else {
        currentTestTableValue.value = testNewComponentDataList;
      }
    });
  }
};

step4. 把想要显示的内容转化成html显示在div内

// 把对应的值转化成需要的html
const formatValueToEditDivHtml = (val: any) => {
  return (
    '<span style="position: absolute;font-size: 11px;margin-top: 10px;margin-left: 10px;">' +
    val.split("/")[0] +
    "/" +
    val.split("/")[1] +
    "/" +
    val.split("/")[2] +
    (val.split("/").length > 9 ? "/" + val.split("/")[3] : "") +
    '</span><span style="position: absolute;display: block;margin-top: 25px;color: green;font-size: 10px;margin-left: 10px;">' +
    (val.split("/").length > 9 ? val.split("/")[4] : val.split("/")[3]) +
    '</span><span style="display: block;position: absolute;margin-top: 40px;color: green;font-size: 10px;margin-left: 10px;">' +
    (val.split("/").length > 9
      ? val.split("/")[5] + "/" + val.split("/")[6]
      : val.split("/")[4] + "/" + val.split("/")[5]) +
    '</span><span style="float: left;display: block;position: absolute;margin-top: 55px;color: green;font-size: 10px;margin-left: 10px;">' +
    val.slice(-26) +
    "</span>"
  );
};

以上是相关解决方案，有什么更好，更方便的办法，欢迎指教！！！