正则【星宿UI】富文本解析插件自定义标题样式

世界上最美好的不过景致，是那些最初的心动不为人知

星宿UI在更新mp-html富文本解析插件之后就失去了旧版本h1-h6标题的伪类样式

mp-html

在官方文档说style插件是支持before和after，attr方法，但是可能受wp不同主题的影响小程序文章详情页面无法同步pc端标题样式，为了统一最好的办法就是在小程序中固定写一个，mp-html支持tag-style设置默认标签，但不支持before和after，这也就无法自定义；最后的办法就是在我们写文章的时候手动输入标题的class例如

<h2 class="h2"></h2>

这样大大减低我们的工作效率，于是在查看源码中阅读到一段代码

rich-text

剩下部分采用rich-txt来解析后的样子如下，在微信小程序官方论坛中也管理员也解释过要定义样式就得在添加class

所以

我们要做的就是两件事情，

第一：在小程序内添加我们需要的DIY样式

第二：在解析的过程中用正则让程序自己添加一个class，虽然会影响一些速度

正则表达式

// 正则添加class that.contentDate = res.data.content.rendered .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(/<h6([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h6') .replace(/<h6([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h6') .replace(/<h6>/ig, '<h6 class="h6">') 

执行后在解析后已经含有class就可以自定义样式

总结

简单说就是发起请求在得到数据res的时候，我们真对正文内容过一次处理，案例比较整理就先不做啦，大家自己试试