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

效果图:

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

相关推荐
Stanford_11062 小时前
如何利用Python进行数据分析与可视化的具体操作指南
开发语言·c++·python·微信小程序·微信公众平台·twitter·微信开放平台
2501_915909063 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
知识分享小能手5 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
2501_915106328 小时前
JavaScript编程工具有哪些?老前端的实用工具清单与经验分享
开发语言·前端·javascript·ios·小程序·uni-app·iphone
Terio_my9 小时前
微信小程序开发从零基础到项目发布的全流程实战教程(四)
微信小程序·小程序
2501_916013749 小时前
iOS 上架 App 全流程实战,应用打包、ipa 上传、App Store 审核与工具组合最佳实践
android·ios·小程序·https·uni-app·iphone·webview
2501_915106329 小时前
iOS 26 能耗监测全景,Adaptive Power、新电池视图
android·macos·ios·小程序·uni-app·cocoa·iphone
Stanford_110611 小时前
关于嵌入式硬件需要了解的基础知识
开发语言·c++·嵌入式硬件·微信小程序·微信公众平台·twitter·微信开放平台
明月(Alioo)11 小时前
用AI帮忙,开发刷题小程序:软考真经微信小程序API接口文档(更新版)
微信小程序·小程序
千码君201614 小时前
React Native:关于react自定义css属性的位置
css·react native·react.js·前端框架·ecmascript·组件嵌套