小程序商品详情图前端渲染问题

"< img src='http://120.76.222.194//goods/image/20181227/1545903685072037527.jpg' title='1545903685072037527.jpg'/></p ><p>< img src='http://120.76.222.194//goods/image/20181227/1545903685296036033.jpg' title='1545903685296036033.jpg'/></p ><p>< img src='http://120.76.222.194//goods/image/20181227/1545903685459095211.jpg' title='1545903685459095211.jpg'/></p ><p><br/>"

后端返回这样的格式,前端要处理渲染出商品详情页的详情图：

/**

* 拿取详情中的img=>src

*/

getImgUrl: function (str) {

if (!str) {

return []

}

//获取所有img标签

const patt1 = /(<img|< img)[^>]*src[=\"\'\s]+[^\.]*\/([^\.]+)\.[^\"\']+[\"\']?[^>]*>/g

//获取所有src属性

const patt2 = /\bsrc\b\s*=\s*[\'\"]?([^\'\"]*)[\'\"]?/g

//获取所有src属性中的url

const patt3 = /(https|http|\/uploadfile)(.*)(jpg|png|jpeg|gif)/g

const newarr0 = str.match(patt1)

if (newarr0 === null) {

return []

}

const newarr = []

newarr0.forEach((item, index, array) => {

newarr.push(item.match(patt2)[0])

})

const newarr2 = []

newarr.forEach((item, index, array) => {

newarr2.push(item.match(patt3)[0])

})

const newarr3 = new Set(newarr2)

return Array.from(newarr3)

},