在 mp-html 富文本组件 解析完 HTML 后,标签是不存在 class 的,只是单独会解析处 style,那么小程序文章详情页的样式很难和网站移动端的样式统一,问题来了,如果每次发布文章内容,都要单独再标签上增加 class 或 style 的话,会给我们带来很大的工作压力。
下列就是要在小程序内增加样式的标签,下文可用于微信和百度小程序。
<h2></h2> <h3></h3> <h4></h4> <h4></h5> <strong></strong>
因 rich-text 不能完全解析所有内容,所以我们采用 mp-html 富文本组件,在解析的过程中用正则让程序自己添加 class 或 style,这里强调一句使用 mp-html 确实会影响加载速度。
下列为 h2 正则表达,我们将解析截取替换为新的内容,自动添加 class 和 style,完成替换后添加需要的样式即可。
post.Content = post.Content .replace(/<h2([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h2') .replace(/<h2([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h2') .replace(/<h2>/ig, '<h2 class="text-h2" style="border-bottom: 1px solid #dfe2ef;padding: 0 0 1rem;font-size: 20px;">')
其他标签的正则表达式,我也列举出来了,可供大家参考。
// 正则添加class post.Content = post.Content .replace(/<h1([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h1') .replace(/<h1([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h1') .replace(/<h1>/ig, '<h1 class="h1">') .replace(/<h2([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h2') .replace(/<h2([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h2') .replace(/<h2>/ig, '<h2 class="h2">') .replace(/<h3([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h3') .replace(/<h3([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h3') .replace(/<h3>/ig, '<h3 class="h3">') .replace(/<h4([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h4') .replace(/<h4([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h4') .replace(/<h4>/ig, '<h4 class="h4">') .replace(/<h5([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h5') .replace(/<h5([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h5') .replace(/<h5>/ig, '<h5 class="h4">') .replace(/<strong([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<strong') .replace(/<strong([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<strong') .replace(/<strong>/ig, '<h6 class="strong">')
增加 style 样式也是一样,替换像 pre 这样的标签次方法依旧实用,本文参考了 星宿UI 的内容,如遇到问题可留言给我,我会第一时间给予解答。