uni-app中过滤器无法处理rich-text的style属性，因小程序端默认过滤style且H5端过滤器不作用于HTML字符串；应使用stripStyle等纯函数预处理HTML字符串再传入rich-text。
uni-app里过滤器无法直接处理style属性
你写的过滤器函数本身能运行，但rich-text组件在小程序端根本不会把style属性传给它——因为rich-text默认就过滤掉style、class等属性，连DOM节点都不生成，更别说进过滤器了。H5端虽然保留style，但过滤器只作用于插值表达式{{ }}，不是用来清洗HTML字符串的。
真正该用正则清洗HTML再传给rich-text
过滤器不是为HTML清洗设计的，得换思路：在数据进入rich-text前，用纯函数预处理字符串。推荐封装一个stripStyle工具函数：
export const stripStyle = (html) => {
if (!html || typeof html !== 'string') return ''
// 移除所有 style 属性（含单双引号、无引号情况）
return html.replace(/style\s*=\s*(['"])[\s\S]*?\1/gi, '')
.replace(/style\s*=\s*[^>\s]+/gi, '')
.replace(/\s+style\s*=\s*["'][^"']*["']/gi, '')
}
- 别依赖
Vue.filter，它跨端失效，且不接收原始HTML字符串 - 在
onLoad或computed里调用stripStyle(htmlContent)，再把结果传给:nodes或:content - 如果还要去
class、id等，一并加到正则里：/\s+(class|id|data-[^=]+)\s*=\s*["'][^"']*["']/gi
富文本展示时style仍不生效？检查平台限制
即使清掉了style，rich-text在微信/支付宝小程序里仍不支持内联样式渲染——这是平台原生限制，不是你代码的问题。此时有两个选择：
- 改用
mp-html组件，它支持解析并应用style属性（需配置tag-style） - 把关键样式转成
nodes结构，手动写attrs: { style: 'color: red;' }，绕过HTML解析阶段 - 放弃内联样式，统一用
::v-deep或全局CSS控制标签外观（如rich-text p）
别混淆“去除style”和“让style生效”
这是最容易被忽略的逻辑断层：你调用过滤器想“去掉style”，但实际需求可能是“让带style的内容正常显示”。前者是字符串处理，后者是组件能力问题。前者用stripStyle函数解决；后者必须换组件或改结构。真机调试时看到样式丢失，先确认控制台有没有警告rich-text: unknown tag或ignored attribute style——有就说明平台已拦截，清洗没用，得换方案。
立即学习“前端免费学习笔记（深入）”；
