支付宝小程序,rich-text 标签nodes属性需要将富文本转换成数组,但是如果img没有结束标签,转换后的内容rich-text是无法解析的,如下:
[{
"name": "img",
"children": [{
"name": "img",
"children": [{
"name": "img",
"children": [],
"attrs": {
"class": "wscnph",
"src": "upload/20191114/5e87dcda66988d14d3b2d48948e8c4.jpg?imageMogr2/auto-orient/thumbnail/750x/format/webp/blur/1x0/quality/75|imageslim"
}
}],
"attrs": {
"class": "wscnph",
"src": "upload/20191114/6942b6042ea2887c6ca64f596b414f.jpg?imageMogr2/auto-orient/thumbnail/750x/format/webp/blur/1x0/quality/75|imageslim"
}
}],
"attrs": {
"class": "wscnph",
"src": "upload/20191114/67a68e76f775f498df97c43614958.jpg?imageMogr2/auto-orient/thumbnail/750x/format/webp/blur/1x0/quality/75|imageslim"
}
}]
所以需要通过正则表达式匹配替换 str.replace(/<img(.*?)>/gi, '<img style="max-width:100%;height:auto" $1 />')
转换后,如下
[
{
"name": "img",
"children": [],
"attrs": {
"style": "max-width:100%;height:auto",
"class": "wscnph",
"src": "/upload/20191114/67a68d376f775f498df97c43614958.jpg?imageMogr2/auto-orient/thumbnail/750x/format/webp/blur/1x0/quality/75|imageslim"
}
},
{
"name": "img",
"children": [],
"attrs": {
"style": "max-width:100%;height:auto",
"class": "wscnph",
"src": "/upload/20191114/694a52b62ea2887c6ca64f596b414f.jpg?imageMogr2/auto-orient/thumbnail/750x/format/webp/blur/1x0/quality/75|imageslim"
}
},
{
"name": "img",
"children": [],
"attrs": {
"style": "max-width:100%;height:auto",
"class": "wscnph",
"src": "/upload/20191114/5e87d7da66988d14d3b2d48948e8c4.jpg?imageMogr2/auto-orient/thumbnail/750x/format/webp/blur/1x0/quality/75|imageslim"
}
}],