关于wxParse对ul,li,ol标签的解析错误解决办法
最近,在做小程序时用到了wxParse这个插件,首先要对这个插件进行赞扬,确实做的挺不错的,能够将富文本很好的替换成小程序能够识别的标签,可惜作者不再维护该插件了,但是不可否认的是存在部分bug,今天就我发现的一个重要bug及解决办法进行分享。
问题:
该插件不能对ul,li,ol,标签进行很好的处理,效果如图。
let str = `<ul><li>测试测试</li></ul>`;
wxParse.wxParse("wifi", 'html', str, this, 5);
原本想去修改作者的源代码,但是奈何才疏学浅,一直找不到解决办法,怎么处理呢?不能不让用户用li等标签吧,纠结了好久,最终换了一种思路:既然不能处理,那我是否能够将ul等标签替换为它能够很好解析的标签呢?抱着这样的想法开始了。
let str = `<ul><li>测试测试</li></ul>`;
// 将所有不能识别的ol, ul, li标签替换为能够正常识别的div标签
str = str.replace(/ol/g, "div");
str = str.replace(/ul/g, "div");
str = str.replace(/li/g, "div");
wxParse.wxParse("wifi", 'html', str, this, 5);
这个问题就这样解决了。
问题原因猜测(纯属个人见解,勿喷):
一开始就有种感觉,应该是元素属性类型的问题,在作者的源代码中,有这样一段代码。
if (block[tag]) {
node.tagType = "block";
} else if (inline[tag]) {
node.tagType = "inline";
} else if (closeSelf[tag]) {
node.tagType = "closeSelf";
}
这是判断标签是否为块级元素的。查阅资料后发现,在文档中。li标签严格来说并不算块级元素,而是属于“半内联”元素。
想到这,应该要验证一下自己的猜想了,怎么验证呢?将li替换成标准的块级元素不就可以了么?于是我将li标签替换成p标签。
let str = `<ul><p>测试测试测试</p></ul>`;
wxParse.wxParse("wifi", 'html', str, this, 5);
这个问题的分享就到这里结束了,下面介绍一下这个插件的使用方法。
首先去下载文件:https://github.com/icindy/wxParse
里边的结构就是这样了
先引用(js,wxml,css都需要引用):
好了,本次分享就到这里了,希望对各位能够带来帮助。