1. 核心目标在后端返回的富文本内容HTML字符串直接用于前端渲染时通常会出现样式错乱、图片溢出或编码错误的问题。本方案旨在通过字符串预处理实现内容的安全解码、样式清洗以及移动端适配。2. 处理流程解析步骤一HTML 实体解码后端传输的数据往往包含转义字符如lt;,gt;等直接渲染会显示为乱码。实现逻辑使用正则表达式全局替换将常见的 HTML 实体还原为对应的字符。关键代码逻辑lt;→gt;→amp;→quot;→步骤二CSS 样式清洗与白名单机制为了防止外部样式污染页面布局需要剔除有害或无效的 CSS 属性仅保留必要的排版样式。去除强制不换行正则匹配text-wrap-mode: nowrap;并替换为空确保文字在移动端能够自动换行。Style 属性白名单过滤遍历所有标签的style属性。保留策略仅保留text-align左对齐、居中、右对齐删除字体大小、颜色等其他内联样式以适配应用的统一主题。步骤三图片响应式适配这是移动端富文本渲染最关键的一步。清除宽高限制移除img标签中原有的width和height属性防止固定像素值导致图片过大溢出屏幕。注入自适应样式在img标签中强制注入内联样式max-width: 100%; height: auto; display: block; margin: 10px auto;。效果图片最大宽度不超过屏幕宽度高度自动按比例缩放并自动居中显示。步骤四标签规范化将所有span标签重置为无属性状态span去除可能存在的干扰类名或事件绑定。3. 代码实现摘要// 核心处理函数 sanitizeHtml(str) { if (!str) return ; let html str; // 1. 基础解码 html html.replace(/lt;/g, )...; // 其他解码略 // 2. 样式清洗去除 nowrap html html.replace(/text-wrap-mode:\s*nowrap;?/g, ); // 3. 样式清洗仅保留 text-align html html.replace(/style([^]*)/gi, (match, styleStr) { const matchAlign styleStr.match(/text-align:\s*(left|center|right)/i); return matchAlign ? style${matchAlign[1]}; : ; }); // 4. 图片适配 html html.replace(/(width|height)[^]*/gi, ); // 移除原有宽高 html html.replace(/img/gi, img stylemax-width:100%;height:auto;display:block;margin:10px auto;); return html; }