微信小程序HTML富文本解析插件/方法对比(wxParse/towxml/自带的rich-text)

那些代码

原文来自：http://www.copterfly.cn/front-end/weixin/parse-rich-text.html

方案一、wxParse

优点

支持绝大部分HTML标签。

可视化还原度高。

图片处理得不错，全屏宽、高自动处理，且图片可以绑定全屏浏览功能(绑定事件)。

支持表情解析。

缺点

部分嵌套过于复杂的标签会出现不能解析(输出为空)的情况。

方案二、towxml

优点

支持绝大部分HTML标签。

可视化还原度一般。

缺点

部分嵌套过于复杂的标签会出现不能解析(输出为空)的情况。这点比 WxParse 表现得更严重。

方案三、微信小程序自带的 <rich-text> 组件

优点

可视化还原度最高。基本上跟在富文本编辑器里看到的一致。

缺点

只能解析它所允许的HTML标签。详见： https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

偶尔会把部分 font-family 设为默认字体(机制未明，但影响不大)。

最大的问题是图片都会解析成原始宽高，导致图片撑宽页面。

因为属于内部机制整体解析，只能对此组件整体绑定事件，无法针对图片分别绑定事件，所有富文本内容无法在解析后再进行其它处理。

写在最后

因项目需求，最终选用了方案三 <rich-text> 组件的方案。（用户编辑的富文本内容嵌套过于复杂，你懂的。）

然后针对它不支持的一些情况做了预处理。

// 富文本预处理
// 在解析前先替换为它允许的标签；比如 <section> 标签
// 删除图片原来的宽高等全部样式以及其它无用属性，添加 width:100% 的样式；
// 图片路径前拼接公网地址。(不需要的话可以注释对应代码；下面的 ${config.imgHost} 表示图片公网位置，比如：https://www.example.com/uploads)
function pretreatRichText(str) {
    return str
        .replace(/\/ueditor\/net/g, `${config.imgHost}/ueditor/net`)
        .replace(/section/g, 'div')
        .replace(/<img([\s\S]*?)(src="[^"]+")[^>]+>/g, function (all, group1, group2) {
            return `<img ${group2} style="width:100%;" />`;
        });
}

在需要使用的地方：

var richText = '从数据接口拿到的富文本数据';
richText = pretreatRichText(richText);

在 wxml 中：

<view class="">
    <rich-text nodes="{{ richText }}"></rich-text>
</view>