一次正则表达式的使用记录

背景

今天老大让我解决一个问题,这个问题的场景是后台管理商品模块编辑商品时,商品信息的商品详情无法回显, 但是不是所有商品都不能回显,有的能回显,有的不能回显.

定位问题

首先我观察了能回显的字段和不能回显的商品详情的字段的差别,如下

• 能回显的

"<p><img src=\"https://gou-1305256095.cos.ap-nanjing.myqcloud.com/1/editor/4b2cc434-850d-4ad2-a414-4135785b746c.jpg\"><img src=\"https://gou-1305256095.cos.ap-nanjing.myqcloud.com/1/editor/067e1072-2387-4300-9531-586f0199999a.jpg\"><img src=\"https://gou-1305256095.cos.ap-nanjing.myqcloud.com/1/editor/7dea8051-1152-4090-8ca6-bac2afedba45.jpg\"><img src=\"https://gou-1305256095.cos.ap-nanjing.myqcloud.com/1/editor/739b619a-6eae-4aba-9573-b870e048351e.jpg\"></p>"

• 不能回显的

"<style>.ssd-module-wrap{position:relative;margin:0 auto;width:750px;text-align:left;background-color:#fff}.ssd-module-wrap .ssd-module,.ssd-module-wrap .ssd-module-heading{width:750px;position:relative;overflow:hidden}.ssd-module-wrap .ssd-video-module .ssd-video-wrap{position:relative;background-size:contain;background-repeat:no-repeat}.ssd-module-wrap .ssd-video-module .ssd-video-wrap .ssd-video-content{position:absolute;width:678px;height:338px;top:310px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.ssd-module-wrap .ssd-floor-activity{max-height:380px;overflow:hidden}.ssd-module-wrap .ssd-floor-shopPrior{max-height:900px;overflow:hidden}.ssd-module-wrap .ssd-floor-authorize{max-height:300px;overflow:hidden}.ssd-module-wrap .ssd-floor-reminder{max-height:4000px;overflow:hidden}.ssd-module-wrap .ssd-module{background-repeat:no-repeat;background-position:left top;background-size:100% 100%}.ssd-module-wrap .ssd-module-heading{background-repeat:no-repeat;background-position:left center;background-size:100% 100%}.ssd-module-wrap .ssd-module-heading .ssd-module-heading-layout{display:inline-block}.ssd-module-wrap .ssd-module-heading .ssd-widget-heading-ch{float:left;display:inline-block;margin:0 6px 0 15px;height:100%}.ssd-module-wrap .ssd-module-heading .ssd-widget-heading-en{float:left;display:inline-block;margin:0 15px 0 6px;height:100%}.ssd-module-wrap .ssd-widget-circle,.ssd-module-wrap .ssd-widget-line,.ssd-module-wrap .ssd-widget-pic,.ssd-module-wrap .ssd-widget-rectangle,.ssd-module-wrap .ssd-widget-table,.ssd-module-wrap .ssd-widget-text,.ssd-module-wrap .ssd-widget-triangle{position:absolute;overflow:hidden}.ssd-module-wrap .ssd-widget-rectangle{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.ssd-module-wrap .ssd-widget-triangle svg{width:100%;height:100%}.ssd-module-wrap .ssd-widget-table table{width:100%;height:100%}.ssd-module-wrap .ssd-widget-table td{position:relative;white-space:pre-line;word-break:break-all}.ssd-module-wrap .ssd-widget-pic img{display:block;width:100%;height:100%}.ssd-module-wrap .ssd-widget-text{line-height:1.5;word-break:break-all}.ssd-module-wrap .ssd-widget-text span{display:block;overflow:hidden;width:100%;height:100%;padding:0;margin:0;word-break:break-all;word-wrap:break-word;white-space:normal}.ssd-module-wrap .ssd-widget-link{position:absolute;left:0;top:0;width:100%;height:100%;background:0 0;z-index:100}.ssd-module-wrap .ssd-cell-text{position:absolute;top:0;left:0;right:0;width:100%;height:100%;overflow:auto}.ssd-module-wrap .ssd-show{display:block}.ssd-module-wrap .ssd-hide{display:none}.ssd-module-wrap .M16499916686341{width:750px; background-color:#b3b3b3; background-size:100% 100%; background-image:url(//img30.360buyimg.com/sku/jfs/t1/200611/24/22696/253295/6258dea3E3dc8fc77/e4e0c673b957d80b.jpg); height:1125px}\n.ssd-module-wrap .M16499916686442{width:750px; background-color:#d7d7d7; background-size:100% 100%; background-image:url(//img30.360buyimg.com/sku/jfs/t1/222492/26/10996/221245/6258dea3E6ca7ab43/f336161c2b432147.jpg); height:516px}\n.ssd-module-wrap .M16499916686513{width:750px; background-color:#cbcbcb; background-size:100% 100%; background-image:url(//img30.360buyimg.com/sku/jfs/t1/196769/21/22426/487705/6258dea3Ebe0cf877/ecee6dd55a9965ab.jpg); height:1040px}\n.ssd-module-wrap .M16499916686584{width:750px; background-color:#d7d7d7; background-size:100% 100%; background-image:url(//img30.360buyimg.com/sku/jfs/t1/199858/26/22172/239924/6258dea3Ef8b75fc2/591e31c29d013855.jpg); height:567px}\n.ssd-module-wrap .M16499916686655{width:750px; background-color:#f2f2f2; background-size:100% 100%; background-image:url(//img30.360buyimg.com/sku/jfs/t1/163628/15/22828/462484/6258dea3Ed1a69c42/3005a89cd1c7ea6f.jpg); height:636px}\n.ssd-module-wrap .M16499916686726{width:750px; background-color:#b3b3b3; background-size:100% 100%; background-image:url(//img30.360buyimg.com/sku/jfs/t1/180325/34/23410/248170/6258dea3E68a7b618/e3284b70fccd8721.jpg); height:722px}\n</style><div cssurl='//sku-market-gw.jd.com/css/pc/100011402796.css?t=1649991858609'></div><div id='zbViewModulesH' value='4606'></div><input id='zbViewModulesHeight' type='hidden' value='4606'/><div skudesign=\"100010\"></div><div class=\"ssd-module-wrap\" >\n <div class=\"ssd-module M16499916686341 animate-M16499916686341\" data-id=\"M16499916686341\">\n \n</div>\n<div class=\"ssd-module M16499916686442 animate-M16499916686442\" data-id=\"M16499916686442\">\n \n</div>\n<div class=\"ssd-module M16499916686513 animate-M16499916686513\" data-id=\"M16499916686513\">\n \n</div>\n<div class=\"ssd-module M16499916686584 animate-M16499916686584\" data-id=\"M16499916686584\">\n \n</div>\n<div class=\"ssd-module M16499916686655 animate-M16499916686655\" data-id=\"M16499916686655\">\n \n</div>\n<div class=\"ssd-module M16499916686726 animate-M16499916686726\" data-id=\"M16499916686726\">\n \n</div>\n\n </div>\n<!-- 2022-04-15 11:04:08 -->"

问题已经基本定位到了,就是项目中使用的富文本编辑器不支持这种格式

解决问题思路

把style 这种格式的转换成img标签的形式,于是就用到了正则表达式,上代码

const data = "富文本编辑器内容"

if (data.match(/url\((.+?)*\)/g)) {
    let hasUrlArr = data.match(/url\((.+?)*\)/g)  // ['url("xx.jpg")',url("yy.jpg")]
    let transferImgs = ""
    hasUrlArr.forEach((urlItem, idx) => {
      	let temp = urlItem.substr(4)   // url("xx.jpg") -> "xx.jpg")
        let processResult = temp.substr(0, temp.length-1) // "xx.jpg") -> "xx.jpg"
        transferImgs += `<img src=${processResult} />`
    }) 
    data = transferImgs
}

这样问题就解决了