需求:后台返回的字符串,前端需要把其中的数字变成红色
这是一个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()
}