textarea怎么解析html代码，从而实现一个可高亮的输入框

效果：

 

思路： 让一个div浮动在textarea上，样式和位置保持完全一致，textarea负责输入，div负责高亮显示

代码：

.vue

<template>
    <div class="highlight-contain">
        <!-- 本组件是带高亮的textarea，需要接受高亮关键词数组来进行高亮 -->
        <div id="highlight-area" class="input-font el-textarea" >
            <div id="fake-textarea" class="el-textarea__inner" v-html="highlightHtml"></div>
        </div>
        <div id="input-area">
            <el-input 
                class="input-font"
                id="input-textarea"
                type="textarea" 
                :placeholder="placeholder" 
                :autosize="autosize" 
                v-model="strValue"
                @input="getHighlightHtml"
                @mousemove.native="setHighlightArea('height',true)"
            ></el-input>
        </div>
    </div>
</template>

<style lang="postcss">
/* 这里是为了让textarea中的文字隐藏，同时这只光标和placeholder颜色 */
#input-area .el-textarea .el-textarea__inner {
     
  color: #606266; /* 光标的颜色*/
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0); /* 文本颜色 */
  -webkit-text-fill-color: transparent;
  &::-webkit-input-placeholder {
    color: #dcdfe6