当前位置: 首页 > article >正文

vue,uniapp,微信小程序解决字符串中出现数字则修改数字样式,以及获取字符串中的数字

简单记录一下,最近遇到的一个新需求:后端返回的是非富文本,只是一串字符串,其中包含了文字和数字,前端需要将出现数字的地方将其加粗或者修改颜色等需求

设计思路:(简单做个记录方便以后理解)(方法有点老土,但是亲测有效,不喜勿喷谢谢

首先通过遍历字符串,通过将所得到的每一项减去0就可以判断当前字符串是否是数字,如果是数字则对应在前后加上标签,这时候就会出现带有小数点的字符串(例如8.8元),这时候需要在判断中多加一步,如果当前项为(.)则判断上一项是否为数字如果是则对应加上标签,

话不多说直接上代码:

1、在data中定义数据(当前为模拟数据)

2、在对应地方处理数据

3、vue,和uniapp可直接使用v-html渲染

4、如果是微信小程序则需要使用rich-text组件

当然使用这个标签的规则可以去微信小程序查看(地址

5、最终展示

6、最后补充一点:如何获取字符串中所有的数字可以使用match()匹配正则表达式实现以下只是举个例子,当然使用的还是上面的text,可根据实际需求匹配对应的正则

最终效果:

最后的最后,如果有哪些大牛有更好的办法,希望指点一二


http://www.kler.cn/a/387452.html

相关文章:

  • ubuntu20.04安装anaconda与基本使用
  • 飞凌嵌入式FET527N-C核心板现已适配Android 13
  • YOLO即插即用---PConv
  • Java 类加载机制详解
  • Python 爬虫运行状态监控:进度、错误与完成情况
  • CSS教程(二)- CSS选择器
  • SpringBoot API版本控制策略详解
  • 【前端】Svelte:动画效果
  • 华为机试HJ33 整数与IP地址间的转换
  • 【复旦微FM33 MCU 开发指南】ADC
  • 微服务中常用分布式锁原理及执行流程
  • delphi 编译多语言工程 error RC2104 : undefined keyword or key name:
  • js id字符串转数组
  • 学习threejs,使用JSON格式保存和加载整个场景
  • Chromium127编译指南 Mac篇(二)- 安装Xcode
  • 【工具】VeraCrypt|Windows 怎么给磁盘文件夹加密码?开源磁盘加密工具 VeraCrypt 教程
  • 青少年编程与数学 02-003 Go语言网络编程 15课题、Go语言URL编程
  • 暮雨直播 1.3.2 | 内置直播源,频道丰富,永久免费
  • SpringBoot Java教学辅助平台:构建高效学习环境
  • LeetCode每日一题3235---判断矩形的两个角落是否可达
  • hadoop+spark中8088,18080,19888,4040端口页面的区别
  • Windows Server服务器上安装的MySQLl数据库连接遇到10055错误
  • FastReport将停止 .NET Framework 上的 WebReport 更新
  • 【JS】如何设置一个只读属性
  • 手把手教你写Unity3D飞机大战(5)玩家子弹射击之显示瞄准图标
  • 工程数学线性代数(同济第七版)附册课后习题答案PDF