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

萧寂1732025-01-09 12:21

需求,有很多文案,需要匹配数字或者-使用特定的颜色,文案由后端返回,但是这个文案要用在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>

效果图:

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