微信小程序动态更改富文本的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>

效果图:

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

相关推荐
睡不着先生7 分钟前
CSS `:is()` & `:where()` 实战指南:简化选择器,提升可维护性
css
拜无忧11 分钟前
css带有“反向圆角”的 Tab 凸起效果。clip-path
前端·css
lyq31515 分钟前
Sass 常用语法
css·scss
阿隆_趣编程29 分钟前
为了方便相亲,我用AI写了一款小程序
前端·javascript·微信小程序
aaaweiaaaaaa11 小时前
HTML和CSS学习
前端·css·学习·html
xcnn_12 小时前
前端入门——案例一:登录界面设计(html+css+js)
前端·css·html
ST.J12 小时前
前端笔记2025
前端·javascript·css·vue.js·笔记
前端Hardy15 小时前
HTML&CSS:有趣的漂流瓶
前端·javascript·css
前端Hardy15 小时前
HTML&CSS :惊艳 UI 必备!卡片堆叠动画
前端·javascript·css
toooooop815 小时前
本地开发环境webScoket调试,保存html即用
前端·css·websocket