简单记录一下,最近遇到的一个新需求:后端返回的是非富文本,只是一串字符串,其中包含了文字和数字,前端需要将出现数字的地方将其加粗或者修改颜色等需求
设计思路:(简单做个记录方便以后理解)(方法有点老土,但是亲测有效,不喜勿喷谢谢)
首先通过遍历字符串,通过将所得到的每一项减去0就可以判断当前字符串是否是数字,如果是数字则对应在前后加上标签,这时候就会出现带有小数点的字符串(例如8.8元),这时候需要在判断中多加一步,如果当前项为(.)则判断上一项是否为数字如果是则对应加上标签,
话不多说直接上代码:
1、在data中定义数据(当前为模拟数据)
2、在对应地方处理数据
3、vue,和uniapp可直接使用v-html渲染
4、如果是微信小程序则需要使用rich-text组件
当然使用这个标签的规则可以去微信小程序查看(地址)
5、最终展示
6、最后补充一点:如何获取字符串中所有的数字可以使用match()匹配正则表达式实现以下只是举个例子,当然使用的还是上面的text,可根据实际需求匹配对应的正则
最终效果:
最后的最后,如果有哪些大牛有更好的办法,希望指点一二