dvcp_v2_webapp/ui/packages/layout/AiHighlight.vue

<template>
  <section class="AiHighlight" :class="{bold}" v-html="html"/>
</template>

<script>
export default {
  name: "AiHighlight",
  props: {
    value: {default: ""},
    content: {default: ""},
    keywords: {default: () => []},
    color: {default: ""},
    bold: Boolean
  },
  computed: {
    words: v => [v.keywords].flat(),
    html() {
      let {content, words, value} = this
      const reg = new RegExp(`(${words.join("|")})`, 'g')
      content = content?.replace(/(@v)/g, this.keywordRender(value))
      return !!words.join("|") ? content?.replace(reg, this.keywordRender('$1')) : content
    }
  },
  methods: {
    keywordRender(word) {
      const {color} = this
      return `<p class="keyword" style="color:${color}">${word}</p>`
    }
  }
}
</script>

<style lang="scss" scoped>
.AiHighlight {
  display: flex;
  align-items: baseline;

  .keyword {
    display: block;
    width: auto;
    color: $primaryColor;
  }

  &.bold {
    .keyword {
      font-weight: bold;
    }
  }
}
</style>