根据搜索的关键字，高亮搜索的结果

问题背景：后端会根据搜索的keyword,返回带<highlight></highlight>的字段：

textCHN:['例如金银夹丝，印花夹<highlight>花</highlight>，大小珠、圈线、竹节，链条等品种。织成毛衣后各具特殊风韵']

如何让关键字符合带<highlight></highlight>的地方内容变为红色

我们可以用到正则

解决方案：

<div class="highlight"  v-html="dealKeyword(textCHN[0])"></div>

      dealKeyword (text) {
      if (text) {
        return text.replace(new RegExp("<highlight>" + keyword + "</highlight>", "g"),
            "<span>" + keyword + "</span>");

      }
    },

.highlight span {
  color : red
}

得到的结果就是这样的

2023/3/8修改

发现自己用正则会有个问题，英文大小写有点没区分，现在有个更简单的办法

<div class="highlight"  v-html="scope.row.highlight.textENG[0]" >
</div >
<style>

highlight {
  color : red
}
</style>

定义标签就行了，轻松解决