被各种内嵌样式渲染的乱七八糟的富文本,如何在前端重新统一字体大小?

[nimingyonghu]

是这样子的,管理后台是有一个富文本编辑器的,但是编辑人员录入文章的时候,可能是直接从 word 之类的地方粘贴的一段文字,粘贴完的文字似乎有很多行内样式,导致最终存储在数据库中的富文本字段为如下格式:

<p><span style="font-family: 微软雅黑; font-size: 19px;"><span style="font-family: 微软雅黑;">又是一个没有蔡徐坤陪伴的日子,</span></span><span style="font-family: 微软雅黑; font-size: 16px;">你百无聊赖的瘫在柔软的沙发上,不知不觉电视中的广告等待时间已经过去</span></p>

上面的富文本最终被渲染出来的字体就是一句话,前几个字体大,后几个字体小...

请问这种有没有在前端再次对文字进行统一处理的办法呢?

尝试用 jQuery 在前端写了一下,似乎在元素的 class 比较简单时有效,但是实际的情况是,出现问题的元素,class 定位比较麻烦.

$('.content p, .content span, .content p').css(
  'font-family', '微软雅黑',  
  'font-size', '16px'
);

有没有老哥有类似经验的?

[jin5354]

文本字段渲染前用正则把所有标签删了，最简单
要不就用 css 星号选择器泛选 + important 覆写

[JayChouTerrace]

Css 选择器，样式后面加 !important，提升权重（优先级）。
话说，之前我就用这个完成了页面字体替换额……

[zhouyg]

在编辑器里监听 paste 事件，把多余标签清理掉，只保留最原始的文本内容

[nimingyonghu]

@jin5354
@JayChouTerrace 嵌套的太深了,不太会写了...

[PanJiaChen]

大部分富文本都提供格式清理的，强用 css 覆盖是不合理的。应该从源头处理。

[xi_lin]

保存你如果没有权限动的话，你展示前先处理一遍过滤掉样式标签，无脑干掉所有 style 属性

[love]

.content * { font-size: 16px !important; }