vue 网页文字中带#的话题颜色高亮

Posted lalalagq

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 网页文字中带#的话题颜色高亮相关的知识,希望对你有一定的参考价值。

网页中显示文字时,带#开始和结束的文字蓝色高亮,就像微博话题一样
效果如下

技术分享图片

html

<span v-html="parseComments('#吃货节#有什么好吃的')"></span> // 方法里面可以是变量,这里只是个演示

js

parseComments (value) {
     var exp
     exp = /(#|#)((?!#).)*(#|#)/g
     value = value.replace(/<[^>]*?>(.*?)/gi, '').replace(/(.*?)</[^>]*?>/gi, '').replace(exp, (item) => {
       let newVal = '<span class="text-blue">' + item + '</span>'
       return newVal
    })
     return value
  }


以上是关于vue 网页文字中带#的话题颜色高亮的主要内容,如果未能解决你的问题,请参考以下文章

如何让浏览器自动标识网页里的某些关键词?(使页面内的文字自动高亮)

使用 prismjs 在网页中高亮显示代码

notepad++设置 高亮 标记颜色

Word文字怎么进行高亮设置

Vue.js学习系列--如何在sublime是vuejs代码呈现高亮状态

苹果手机微信文档文字不能显示高亮颜色是啥原因?