如何突出显示某段文字的重点部分

这是我最近碰到的一个需求，用一张简单的图来解释：

很简单是不是？我一开始想的是，怎么把突出显示的部分给抠出来，但是这个用户可以在系统里面配置耶，那我前台获取数据之后，怎么判断哪几个字要突出显示呢？它又没有个规律，于是跟中台哗啦哗啦地扯，最后叫他给我在标红的文字前后给我加个标记 “#”，当然，前台系统配置界面也会提醒用户在需要标红的文字前后加 “#”。这样前台就好办啦！

<template>
  <div class="demo">
   <div v-for="(item,index) in list" :key="index" v-html="handleText(item)" ></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [
        '恭喜#小小#同学，获得第一名，#表现优异#，特此鼓励！',
        '恭喜#二花#同学，获得第二名，表现优秀，特此鼓励！',
        '恭喜#三喜#同学，获得第三名，#表现优良#，特此#鼓励！',
        '#恭喜四美同学，获得第四名，进步巨大，特此鼓励！'
      ]
    }
  },
  methods: {
    handleText (str) {
      // 只能替换一对 #
      // return str.replace('#', '<span style="color:red">').replace('#', '</span>')
      let count = 0
      // 所有第奇数个 # 替换 <span style="color:red">； 第偶数个 # 替换成 </span>
      str = str.replace(/#/g, (match) => {
        count++
        return count % 2 === 1 ? '<span style="color:red">' : '</span>'
      })
      return str
    }
  }
}
</script>

但是，据说 v-html 不太安全，你有更好的办法么？欢迎分享！