前端富文本处理：解码、清洗与适配

1. 核心目标

在后端返回的富文本内容（HTML字符串）直接用于前端渲染时，通常会出现样式错乱、图片溢出或编码错误的问题。本方案旨在通过字符串预处理，实现内容的安全解码、样式清洗以及移动端适配。

2. 处理流程解析

步骤一：HTML 实体解码
后端传输的数据往往包含转义字符（如<,>等），直接渲染会显示为乱码。

• 实现逻辑：使用正则表达式全局替换，将常见的 HTML 实体还原为对应的字符。
• 关键代码逻辑：
  • <→<
  • >→>
  • &→&
  • "→"

步骤二：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 style="max-width:100%;height:auto;display:block;margin:10px auto;"'); return html; }