小程序Markdown渲染库渲染问题小记

最近在使用Markdown渲染库wemark (opens new window)的过程中遇到了图片不能显示的问题。
渲染库可以渲染markdown语法格式的图片，但是对于自定义大小了的原生图片标签却无法正常渲染，导致markdown文件中的图片无法正常显示。

首先我们知道markdown中插入图片有几种方式

![avatar](本地图片路径/网络图片路径/图片base64编码)

但是无法控制图片的显示大小，如果想控制大小就必须使用img标签了。

类似如下这种

<img src="/images/xxx.jpg" style="width: 40%;">

这样子在显示的时候就可以看到图片显示大小得到了控制，但是Markdown渲染库无法识别。
所以暂时采取了一个比较曲线的方法，就是把原生图片标签再转换为md支持的图片格式

使用正则把图片标签转为markdown图片语法

let imgReg = /<img.*?(?:>|\/>)/gi //匹配img标签
let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i // 匹配图片中的src
let altReg = /alt=[\'\"]?([^\'\"]*)[\'\"]?/i // 匹配图片的alt

let cnt = data //markdown内容
let arr = cnt.match(imgReg) //筛选出所有的img

if (arr) {
    for (let i = 0; i < arr.length; i++) {
        let src = arr[i].match(srcReg)
        let alt = arr[i].match(altReg)
        let imgMdStr =
        '![' +
        (alt != null ? alt : '图片') +
        '](' +
        src[1] +
        ')'
        cnt = cnt.replace(arr[i], 'img' + i).replace('img' + i, imgMdStr)
    }
}

这样图片就被还原为渲染库支持的格式，可以正常显示了。