mp-html 富文本组件自定义文章标签样式

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