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

devtools/2024/11/14 0:33:23/

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

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

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

话不多说直接上代码:

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

2、在对应地方处理数据

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

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

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

5、最终展示

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

最终效果:

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


http://www.ppmy.cn/devtools/133050.html

相关文章

mac-泛洪

泛洪攻击的类型 TCP SYN Flood: 攻击者向目标服务器发送大量的 TCP SYN 请求,但不完成握手过程。服务器为每个请求分配资源,最终可能耗尽其连接表,导致无法处理正常请求。 UDP Flood: 攻击者向目标发送大量的 UDP 数据…

spring AOP详解

文章目录 AOP1 环境准备1.1 工程及接口创建1.2 工程存在的问题1.2.1 问题1.2.2 解决思路 2 AOP面向切面编程2.1 AOP概述2.2 AOP原理分析 3 基于注解的AOP3.1 入门示例3.2 使用流程3.3 切入点表达式3.4 练习3.5 通知类型 AOP ​ AOP(Aspect Orient Programming&…

gitlab无法创建合并请求是所有分支都不显示

点击Merge Requests ------> New merge request 创建新的合并请求时,在Source branch和Target branch中一个分支都不显示 排查思路: 1.怀疑是权限问题。 发现只有我的一个账号出现,检查了账号的权限,尝试了master、develop角色…

图像手动标注-labelme+yolo格式导出

conda环境 运行以下命令来激活你的虚拟环境: conda activate labelme如果你没有创建 labelme 环境,首先需要创建一个环境并安装 labelme: conda create -n labelme python3.8 conda activate labelme conda install -c conda-forge labelm…

React Native的生命周期

React Native 组件的生命周期分为三个阶段:Mounting(挂载)、Updating(更新) 和 Unmounting(卸载)。每个阶段都会触发不同的生命周期方法。 下面是详细的生命周期解释,并通过一个项目…

关于Dell r730xd 老服务器的阵列卡 配置系统盘RAID 1

这里写自定义目录标题 关于Dell r730xd 老服务器的阵列卡 配置系统盘RAID 1操作步骤 关于Dell r730xd 老服务器的阵列卡 配置系统盘RAID 1 操作步骤 -开机后 按 Ctrl R 进入 RAID卡 配置界面,如下:-下面图片是 服务器中硬盘都已经准备好,并…

【计网】基于TCP协议的Echo Server程序实现与多版本测试

目录 前言: 1、InitServer类的实现 1.1. 创建流式套接字 1.2. bind 绑定一个固定的网络地址和端口号 1.3.listen监听机制 1.4.完整代码 2. 循环接收接口与服务接口 2.1.accept函数讲解 讲个商场拉客的故事方便我们理解: 2.2.服务接口实现 3.服…

pnpm管理多工作区依赖

pnpm是一个支持多包仓库的一个包管理工具,那么怎么可以在项目根目录下执行pnpm install的时候,也能同步让所有的工作区都能够通安装依赖呢? 方式一,在执行pnpm install指令的时候,添加recursive参数: pnpm install --recursive 方式二,在项目的根目录下通过pnpm的配置文件p…