后台返回的字符串,前端需要把其中的数字变成红色

需求:后台返回的字符串,前端需要把其中的数字变成红色
这是一个vue 项目, 也是翻了很多的大佬写的博客,自己总结了一下,开始时循环这个字符串,利用过滤器实现了这个需求,但是这样严重消耗了浏览器的性能,创建出了很多的span 标签,经过大佬的点播,换了一种方法,上代码:

<!-- html代码 -->
<div v-html="str"></div>
data () {
	return {
		str: ''
	}
},
methods: {
	strInit () {
	// 这里模拟后台返回的字符串
      let strText = '的发货尽快送达后发生的就返回的123积分活动时间发货234房间号多少345风华绝代撒回复456'
      let replaceText = []
      for (let i = 0; i <= 10; i++) {
        replaceText.push('' + i)
      }
      // 转换成html形式解析
      for (let i = 0; i < replaceText.length; i++) {
        var replaceString = '<span style="color: red;">' + replaceText[i] + "</span>"
        strText = strText.replace(RegExp(replaceText[i],'g') ,replaceString)
      }
      // 这里再把这个红色替换成你想要的颜色
      // 由于在循环体里面数字会被替换,所以用了一个单词(red)来当成初始色
      strText = strText.replace(RegExp('red','g'), '#3885FE')
      this.str = strText
    },
},
mounted(){
    this.strInit()
}




 

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值