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

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 网页文字中带#的话题颜色高亮的更多相关文章

  1. 解决win10系统dpi放大后,部分网页文字颜色很浅的问题

    前段时间,换了个27寸的4k显示器.原始分辨率下文字太小,眼睛估计得看瞎 放大dpi后,这问题,那问题,好多 百度知道,淘宝,这网页文字颜色也非常的浅,看着眼睛很累人 看了半天是字体若的祸 暂时发现A ...

  2. Android:用代码修改一行文字中某几个字的颜色

    TextView changeVideoQualityTxt = (TextView) rootView.findViewById(R.id.enter_wireless_display_txt); ...

  3. 教你避雷!网页设计中常见的17个UI设计错误集锦(附赠设计技巧)

    以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 精心设计的用户界面对网站意义重大.具备所有最新功能和响应式设计有助于提高网站的搜索引擎排名,从而增加受众 ...

  4. 干货 | 调用AI api 实现网页文字朗读

    京东云上提供了足够多的人工智能api,并且都使用了http的方式进行了封装,用户可以方便在自己的系统中接入京东云的ai能力.今天就是介绍一下如何编写很少的代码就能使用京东云的语音合成api在网页中实现 ...

  5. php如何清除html格式并去除文字中的空格然后截取文字

    PHP如何清除html格式并去除文字中的空格然后截取文字,详细分享一下处理方法(顺便对PHP清除HTML字符串的函数做了一个小结): htmlspecialchars 将特殊字元转成 HTML格式语法 ...

  6. WPF中动态更新TextBlock文字中的超链接,文本

    1.------------------------------------------------------------------------- 修改超链接的文本文字: <TextBloc ...

  7. CSS网页布局中易犯的30个小错误

    即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...

  8. Photoshop在网页设计中的应用与方法

    1.图像局部截取和图像尺寸调整 做网页设计时经常要用到的某张图像一部分,这就需要截取图像的局部.图像局部截取的方法很多,但使用Photoshop操作起来更方便.具体操作步骤如下: (1)在Photos ...

  9. 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理

    在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...

随机推荐

  1. Seven-segment Display 贪心选择,快速判断能否有解

    https://csacademy.com/contest/round-39/task/seven-segment-display/ 可以知道,只有1是无解 而且肯定是选出来的位数约小越好. 位数 = ...

  2. (转)Linux最常用指令及快捷键 Linux学习笔记

    Linux最常用指令及快捷键 Linux学习笔记 原文:http://blog.csdn.net/yanghongche/article/details/50827478 [摘自 鸟叔的私房菜]--转 ...

  3. 《从0到1学习Flink》—— Data Sink 介绍

    前言 再上一篇文章中 <从0到1学习Flink>-- Data Source 介绍 讲解了 Flink Data Source ,那么这里就来讲讲 Flink Data Sink 吧. 首 ...

  4. Java排序算法(一)

    Java排序算法(一) 排序的基本概念和分类 1.1排序的定义 在<大话数据结构>中,排序定义为,假设含有n个记录的序列为{r1,r2,...,rn},其相应的关键字{k1,k2,..., ...

  5. 安装xenserver过程中出现的问题

    运行环境:win10系统,神舟战神z7m-KP7GT型号笔记本,VMWare虚拟机,XenServer7.2.0,XenCenter7.2.0 5月22日下午安装上xenserver虚拟机,发现虚拟机 ...

  6. pure响应式布局

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. visual studio2010中C#生成的,ArcGIS二次开发的basetool的dll,注册为COM组件tlb文件,并在arcmap中加载使用

    写了个标题好长啊~~~~ 这两天又认识了一个新玩意,记录一下下,啦啦啦~~~~~ 话说,认识arcgis快十年了,从桌面版到engine的二次开发,其实不过才认识到它的冰山一角, 它总是能带来很多还未 ...

  8. 软件测试Lab 1 Junit and Eclemma

    首先安装eclipse 然后下载hamcrest-core-1.3.jar,下载地址:http://mvnrepository.com/artifact/org.hamcrest/hamcrest-c ...

  9. 部署webservice到远程服务器

    在本地编写好webservice后并在本机验证正确后,在本地发布后,直接将发布时设置的文件夹复制到远程服务器上,在远程服务器的IIS上默认网站->新建虚拟目录->设置别名->物理路径 ...

  10. 1)实际时间(real time): 从command命令行开始执行到运行终止的消逝时间; 2)用户CPU时间(user CPU time): 命令执行完成花费的用户CPU时间,即命令在用户态中执行时间总和; 3)系统CPU时间(system CPU time): 命令执行完成花费的系统CPU时

    1)实际时间(real time): 从command命令行开始执行到运行终止的消逝时间: 2)用户CPU时间(user CPU time): 命令执行完成花费的用户CPU时间,即命令在用户态中执行时 ...