微信小程序动态更改富文本的css样式

需求,有很多文案,需要匹配数字或者-使用特定的颜色,文案由后端返回,但是这个文案要用在pc和小程序上面,只有小程序上面要变色,pc端都是黑色不变色,后端返回文案如下: 恭喜开启新的一周首次训练,建议保持每周3-4次训练频次哦!运动是生活的解药!,我们需要将文案中的3-4改成蓝色,使用富文本形式,格式如下:

js文件

js 复制代码
Page({

  /**
   * 页面的初始数据
   */
  data: {
    nodes: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let text = '恭喜开启新的一周首次训练,建议保持每周3-4次训练频次哦!运动是生活的解药!';
    
    // 匹配数字和负号,并设置样式为蓝色
    let result = text.replace(/(-?\d+)/g, (match) => `<span style='color:blue;font-weight:560'>${match}</span>`);

    // 如果有第二个文字颜色需求,例如匹配特定字符"一",并设置样式为粉色
    // result = result.replace(/一/g, (match) => `<span style='color:pink;font-weight:560'>${match}</span>`);

	// 如果还有更多样式的话继续根据上面的进行替换,最后一个就是最终的样式

    this.setData({
      nodes: `<div>${result}</div>`
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

html文件

html 复制代码
<view style="margin-top: 300rpx;">
  <rich-text nodes="{{nodes}}"></rich-text>
</view>

效果图:

原理就是使用正则表达式进行匹配

相关推荐
HERR_QQ2 小时前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
孤水寒月6 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
racerun10 小时前
小程序导航设置更多内容的实现方法
小程序
说私域10 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg66810 小时前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳11 小时前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww12114 小时前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero15 小时前
微信小程序41~50
微信小程序·小程序
呆呆的心16 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css