近期产品需求遇到一个问题，需要在查询输入框输入内容之后，需要 提示由后端返回不匹配文字，并且标红
有几种解决方案
1、最简单的方法是在输入框外，如它的下面新增 错误提示文字信息，最后正则匹配替换高亮错误文字
2、使用富文本的方式，需引入第三方富文本组件且需去除无关功能，然后在去正则匹配后端返回的文字，然后再新增带有style的标签即可，
3、使用使用障眼法，在textarea上面定位一个div并使用v-html富文本渲染，使用pointer-events: none;进行穿透可输入处理，且也可以同步到光标的位置，个人觉得是比较好的一种方法
实现：
<template><div><div class="addBox" @click="hideRed"><el-input class="editInput" v-model="content" :maxLength="100" placeholder="请输入"type="textarea"></el-input><!-- 高亮遮罩处理 --><div class="editDiv textareaClas" v-html="contentHtml" contentEditable="true" v-if="contentHtml"> //contentEditable 是为了使其提供光标，然后通过点击可以渗透到textarea进行错误的修正</div></div><p @click="addRed">请求接口</p></div>
</template><script>
export default {data() {return {content: '',contentHtml: ''};},methods: {hideRed() {//这里的话 如果点击该div，就会隐藏掉遮罩内容if (this.contentHtml) {this.contentHtml = ''}},addRed() {let text = this.content;['哈哈'].forEach(item => {// 使用 `new RegExp()` 创建正则表达式，并且用变量 item 的值替换里面的占位符 const regex = new RegExp(item, 'g'); // 如果 item 可能包含正则表达式特殊字符，需要额外转义 text = text.replace(regex, `<span style="color:red;">${item}</span>`);});// 需要正对于 < 符号的 浏览器不会渲染出<后面的,如<span style="color:red;">金>123</span>,<span style="color:red;">外评级>AAA</span>,评级<AAA,这里<AAA就不会正常渲染let regex1 = /(?<!<span[^>]*)(<)(?![^>]*>)/g; this.contentHtml = text.replace(regex1, '<'); },}
};
</script>
<style scoped >
.addBox {position: relative;//父.editInput {font-size: 12px;}.editDiv {position: absolute;top: 0px;z-index: 99;background: transparent;}//和textarea样式一样，才能无感.textareaClas {pointer-events: none;resize: vertical;height: 65px;padding: 5px 15px;box-sizing: border-box;width: 100%;color: #606266 !important;background-image: none;border: 1px solid #DCDFE6;letter-spacing: normal;word-spacing: normal;line-height: normal;text-transform: none;text-indent: 0px;text-shadow: none;display: block;text-align: start;appearance: auto;-webkit-rtl-ordering: logical;cursor: text;overflow-wrap: break-word;background-color: field;column-count: initial !important;font-size: 12px;border-radius: 4px;font-family: monospace;transition: border-color .2s cubic-bezier(.645, .045, .355, 1);&:hover,&:focus,&:focus-visible {border: 1px solid #40a9ff !important;}}[contenteditable]:focus {outline: none;}}
</style>
】)
)