VUE利用正则表达式给特定文本添加颜色

最新推荐文章于 2025-06-10 18:11:36 发布

原创最新推荐文章于 2025-06-10 18:11:36 发布 · 1.4k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue #正则表达式 #html

vue 同时被 2 个专栏收录

12 篇文章

订阅专栏

编程

7 篇文章

订阅专栏

本文介绍如何在Vue项目中结合正则表达式，通过`v-html`指令实现对特定文本内容添加HTML标签以改变颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用正则表达式给特定文本添加颜色

展示如下：

<div class="content">审核内容：<span v-html="filterWord(content)"></span></div>

`注意：方法一定一定要写在v-html里面，不然会将标签显示在页面的哦！！！`

v-html指令：输出真正的 HTML，解析html标签。

data() {
	keyword: ['人们','在'],
	content:'人们都在吃饭，人们都在睡觉，人们都在打豆豆。'
}
methods: {
	filterWord (text) {
      if (text) {
        let keywordJoin = this.keyword.join('|')
        return text.replace(new RegExp('(' + keywordJoin + ')', 'g'), '<font color=red>$1</font>')
      }
    }
}