在 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 的内容,如遇到问题可留言给我,我会第一时间给予解答。