Vue3使用v-html实现文本关键词变色处理

//存储结果
const introduction_content = ref('')
//定义函数
const updateColor = function (content: string) {
    let keywords = ['导师:', '关联比赛:', '获得成就:', '未来发展:', '奖金:']
    const result = ref(content) // 初始值为原始内容
    //本项目的需求是根据项目状态动态变更颜色
    const color = ref(
      detailData.value!.status == 0
        ? 'rgba(7, 193, 96, 1)'
        : detailData.value!.status == 1
        ? 'rgba(250, 157, 59, 1)'
        : detailData.value!.status == 2
        ? 'rgba(250, 81, 81, 0.5)'
        : ''
    )
    // 遍历每个关键词并进行替换
    keywords.forEach((keyword) => {
      const regex = new RegExp(keyword, 'gi')
      // 每次替换都基于当前的 result.value
      result.value = result.value.replace(
        regex,
        `<span style="color: ${color.value};font-size:15px;">${keyword}</span>`
      )
    })
    introduction_content.value = result.value
}

xx项目简介
<span style="color: rgba(7, 193, 96, 1);font-size:15px;">导师:</span>​xxx
<span style="color: rgba(7, 193, 96, 1);font-size:15px;">关联比赛:</span>​建模
<span style="color: rgba(7, 193, 96, 1);font-size:15px;">奖金:</span>​100