vue实现多组关键词对应高亮显示功能

colors: [    "#FFB5C5",    "#EEC900",    "#D1EEEE",    "#40E0D0",    "#FFFF00",    "#FF7F00",    "#FF6A6A",    "#B3EE3A",    "#9F79EE",    "#FFC1C1"   ],   keywordsdetail: ["好看", "美丽", "wfewf"],   comments: [    {     text: "老师 好看好看222"    },    {     text: "老师美丽11111极了"    },    {     text: "老师太搞笑34234了"    },    {     text: "老师搞笑的不的了"    },    {     text: "老师:ox::beer:wfewf啊"    }   ]

<span    v-for="(item,index) in keywordsdetail"    :key="index"    class="keyworditem"    :style="{backgroundColor:colors[index]}"    @click="showpartkey(index,comments)"   >{{item}}</span>

changeColor(resultsList, keywords) {   keywords.map((keyitem, keyindex) => {    resultsList.map((item, index) => {     if (keyitem && keyitem.length > 0) {      // 匹配关键字正则      let replaceReg = new RegExp(keyitem, "g");      // 高亮替换v-html值      let replaceString =       '<span class="highlight"' +       ' style="color: ' +       this.colors[keyindex] +       ';">' +       keyitem +       "</span>";      resultsList[index].text = item.text.replace(       replaceReg,       replaceString      );     }    });   });   this.comments = [];   this.comments = resultsList;  }

let replaceString = '<span class="highlight"' +' style="color: ' + this.colors[keyindex] + ';">' + keyitem + "</span>";

<span class="highlight">keyitem</span>

.highlight {color:red}

.aaa >>>.highlight{color:red}