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

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

正则【星宿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>

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

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

rich-text

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

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

所以

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

第一:在小程序内添加我们需要的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就可以自定义样式

正则【星宿UI】

总结

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

正则【星宿UI】富文本解析插件自定义标题样式 1
(3)
上一篇 08/26/2021
下一篇 09/07/2021

相关推荐

发表评论

您的电子邮箱地址不会被公开。

评论列表(4条)