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

效果图:

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

相关推荐
Hilaku8 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
文心快码BaiduComate9 小时前
用Comate Zulu开发一款微信小程序
前端·后端·微信小程序
拜无忧11 小时前
html,svg,花海扩散效果
前端·css·svg
华仔啊16 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
在云端易逍遥17 小时前
前端必学的 CSS Grid 布局体系
前端·css
进阶的鱼17 小时前
(4种场景)单行、多行文本超出省略号隐藏
前端·css·面试
石金龙1 天前
[译] Composition in CSS
前端·css
天天扭码1 天前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153171 天前
CSS特异性:如何精准控制样式而不失控?
前端·css
会豪2 天前
CSS 动画属性精讲:从基础到实战
前端·css