关于wxParse对ul,li,ol标签的解析错误解决办法

最近,在做小程序时用到了wxParse这个插件,首先要对这个插件进行赞扬,确实做的挺不错的,能够将富文本很好的替换成小程序能够识别的标签,可惜作者不再维护该插件了,但是不可否认的是存在部分bug,今天就我发现的一个重要bug及解决办法进行分享。

问题:

该插件不能对ul,li,ol,标签进行很好的处理,效果如图。

let str = `
  • 测试测试
`; wxParse.wxParse("wifi", 'html', str, this, 5);

关于wxParse对ul,li,ol标签的解析错误解决办法_第1张图片

原本想去修改作者的源代码,但是奈何才疏学浅,一直找不到解决办法,怎么处理呢?不能不让用户用li等标签吧,纠结了好久,最终换了一种思路:既然不能处理,那我是否能够将ul等标签替换为它能够很好解析的标签呢?抱着这样的想法开始了。

let str = `
  • 测试测试
`; // 将所有不能识别的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 = `

    测试测试测试

`; wxParse.wxParse("wifi", 'html', str, this, 5);

在这里插入图片描述
这个问题的分享就到这里结束了,下面介绍一下这个插件的使用方法。
首先去下载文件:https://github.com/icindy/wxParse
里边的结构就是这样了
关于wxParse对ul,li,ol标签的解析错误解决办法_第2张图片
先引用(js,wxml,css都需要引用):

关于wxParse对ul,li,ol标签的解析错误解决办法_第3张图片
好了,本次分享就到这里了,希望对各位能够带来帮助。

你可能感兴趣的:(技术之路)