正则获取CSS中所有的背景图片地址，微信小程序显示京东商品详情

我爱模板网在做链猫小程序时，它的产品是直接从京东的接口获取的，而京东的接口返回的产品详情，有点意思，一般两种情况：

1、直接返回一段html，这段html中都是图片，样式都放在HTML的行内样式中，要在小程序中显示，用wxParse http://www.5imoban.net/jiaocheng/weixin/2020/0227/3759.html直接显示即可

2、返回一个html字段和一个css字段，html字段里面就是几个空div，上面挂满了css，而css字段里面定义了html的样式，包括背景图片，而背景图片就是我们要显示的。如下是我爱模板网调取京东商品的一个css返回：

<style>.ssd-module-mobile-wrap .ssd-module,.ssd-module-mobile-wrap .ssd-module-heading{width:750px;position:relative;overflow:hidden}.ssd-module-mobile-wrap .ssd-hide{display:none}.ssd-module-mobile-wrap .M15365455912291{width:100.00%; background-color:#f2f2f2; background-image:url(//img30.360buyimg.com/sku/jfs/t1/141/24/2329/302044/5b95d051E580de19b/3ceec7c1e1a59823.jpg); height:995px}\n.ssd-module-mobile-wrap .M15365455912622{width:100.00%; background-color:#cbcbcb; background-image:url(//img30.360buyimg.com/sku/jfs/t1/101820/1/11022/168341/5e295956E8f395e4c/cd23ab23427e5cab.jpg); background-size:100% 100%; height:1025px}\n.ssd-module-mobile-wrap .M15365455912743{width:100.00%; background-color:#d7d7d7; background-image:url(//img30.360buyimg.com/sku/jfs/t1/35421/26/9514/263857/5cd01cafE0a93ba7f/e5ac04468790ae77.jpg); background-size:100% 100%; height:1104px}\n.ssd-module-mobile-wrap .M15365455912874{width:100.00%; background-color:#e9e9e9; background-image:url(//img30.360buyimg.com/sku/jfs/t1/28370/1/383/225215/5c0923d5E635a9200/b5dc26a8fd5563d6.jpg); height:874px}\n.ssd-module-mobile-wrap .M15365455912975{width:100.00%; background-color:#b3b3b3; background-image:url(//img30.360buyimg.com/sku/jfs/t1/108619/38/4881/212316/5e295956E875e599c/6a3da66f32f9303c.jpg); background-size:100% 100%; height:1048px}\n.ssd-module-mobile-wrap .M15365455913066{width:100.00%; background-color:#f2f2f2; background-image:url(//img30.360buyimg.com/sku/jfs/t1/8552/11/7813/239742/5c0923f2E1d19893d/7ce088044c5a03a8.jpg); height:1149px}\n.ssd-module-mobile-wrap .M15365455913167{width:100.00%; background-color:#cbcbcb; background-image:url(//img30.360buyimg.com/sku/jfs/t1/4588/23/2059/214440/5b95d052E9c9d017f/c15edbf432659842.jpg); height:919px}\n.ssd-module-mobile-wrap .M15365455913278{width:100.00%; background-color:#f2f2f2; background-image:url(//img30.360buyimg.com/sku/jfs/t1/407/13/2416/303988/5b95d053Eea5cf8a8/855c3dee09af8eb5.jpg); height:936px}\n.ssd-module-mobile-wrap .M15365455913389{width:100.00%; background-color:#e9e9e9; background-image:url(//img30.360buyimg.com/sku/jfs/t1/2641/11/2087/279933/5b95d053E86d89f0a/c2525af6ee226038.jpg); height:1040px}\n.ssd-module-mobile-wrap .M153654559135010{width:100.00%; background-color:#f2f2f2; background-image:url(//img30.360buyimg.com/sku/jfs/t1/97518/3/11218/106617/5e29594eE32399051/1651796533a9a0cc.jpg); background-size:100% 100%; height:773px}\n.ssd-module-mobile-wrap .M153654559136711{width:100.00%; background-color:#cbcbcb; background-image:url(//img30.360buyimg.com/sku/jfs/t1/89478/23/11222/206468/5e29594fE974ca11d/8ded8d322d56e488.jpg); background-size:100% 100%; height:916px}\n.ssd-module-mobile-wrap .M153654839464712{width:100.00%; background-color:#b3b3b3; background-image:url(//img30.360buyimg.com/sku/jfs/t1/108625/9/3133/251380/5e0dd638Ee37c47c2/01e16ec9d7aabfec.jpg); background-size:100% 100%; height:348px}\n.ssd-module-mobile-wrap .M153654840036713{width:100.00%; background-color:#e9e9e9; background-image:url(//img30.360buyimg.com/sku/jfs/t23032/240/2421747671/324634/871fd335/5b7f6228N061b1539.jpg); height:963px}\n</style>

而wxParse是无法解析外部css的，离开了这段css又无法显示。于是我爱模板网想到了个好方法，将css里面的图片全部抽离出来，自己组装成html，进行显示。
思路分两步
1，匹配出图片img标签（即匹配出所有图片），过滤其他不需要的字符
2，从匹配出来的结果（img标签中）循环匹配出图片地址（即src属性）

var str = "<style>.ssd-module-mobile-wrap .ssd-module,.ssd-module-mobile-wrap .ssd-module-heading{width:750px;position:relative;overflow:hidden}.ssd-module-mobile-wrap .ssd-hide{display:none}.ssd-module-mobile-wrap .M15365455912291{width:100.00%; background-color:#f2f2f2; background-image:url(//img30.360buyimg.com/sku/jfs/t1/141/24/2329/302044/5b95d051E580de19b/3ceec7c1e1a59823.jpg); height:995px}\n.ssd-module-mobile-wrap .M15365455912622{width:100.00%; background-color:#cbcbcb; background-image:url(//img30.360buyimg.com/sku/jfs/t1/101820/1/11022/168341/5e295956E8f395e4c/cd23ab23427e5cab.jpg); background-size:100% 100%; height:1025px}\n.ssd-module-mobile-wrap .M15365455912743{width:100.00%; background-color:#d7d7d7; background-image:url(//img30.360buyimg.com/sku/jfs/t1/35421/26/9514/263857/5cd01cafE0a93ba7f/e5ac04468790ae77.jpg); background-size:100% 100%; height:1104px}\n.ssd-module-mobile-wrap .M15365455912874{width:100.00%; background-color:#e9e9e9; background-image:url(//img30.360buyimg.com/sku/jfs/t1/28370/1/383/225215/5c0923d5E635a9200/b5dc26a8fd5563d6.jpg); height:874px}\n.ssd-module-mobile-wrap .M15365455912975{width:100.00%; background-color:#b3b3b3; background-image:url(//img30.360buyimg.com/sku/jfs/t1/108619/38/4881/212316/5e295956E875e599c/6a3da66f32f9303c.jpg); background-size:100% 100%; height:1048px}\n.ssd-module-mobile-wrap .M15365455913066{width:100.00%; background-color:#f2f2f2; background-image:url(//img30.360buyimg.com/sku/jfs/t1/8552/11/7813/239742/5c0923f2E1d19893d/7ce088044c5a03a8.jpg); height:1149px}\n.ssd-module-mobile-wrap .M15365455913167{width:100.00%; background-color:#cbcbcb; background-image:url(//img30.360buyimg.com/sku/jfs/t1/4588/23/2059/214440/5b95d052E9c9d017f/c15edbf432659842.jpg); height:919px}\n.ssd-module-mobile-wrap .M15365455913278{width:100.00%; background-color:#f2f2f2; background-image:url(//img30.360buyimg.com/sku/jfs/t1/407/13/2416/303988/5b95d053Eea5cf8a8/855c3dee09af8eb5.jpg); height:936px}\n.ssd-module-mobile-wrap .M15365455913389{width:100.00%; background-color:#e9e9e9; background-image:url(//img30.360buyimg.com/sku/jfs/t1/2641/11/2087/279933/5b95d053E86d89f0a/c2525af6ee226038.jpg); height:1040px}\n.ssd-module-mobile-wrap .M153654559135010{width:100.00%; background-color:#f2f2f2; background-image:url(//img30.360buyimg.com/sku/jfs/t1/97518/3/11218/106617/5e29594eE32399051/1651796533a9a0cc.jpg); background-size:100% 100%; height:773px}\n.ssd-module-mobile-wrap .M153654559136711{width:100.00%; background-color:#cbcbcb; background-image:url(//img30.360buyimg.com/sku/jfs/t1/89478/23/11222/206468/5e29594fE974ca11d/8ded8d322d56e488.jpg); background-size:100% 100%; height:916px}\n.ssd-module-mobile-wrap .M153654839464712{width:100.00%; background-color:#b3b3b3; background-image:url(//img30.360buyimg.com/sku/jfs/t1/108625/9/3133/251380/5e0dd638Ee37c47c2/01e16ec9d7aabfec.jpg); background-size:100% 100%; height:348px}\n.ssd-module-mobile-wrap .M153654840036713{width:100.00%; background-color:#e9e9e9; background-image:url(//img30.360buyimg.com/sku/jfs/t23032/240/2421747671/324634/871fd335/5b7f6228N061b1539.jpg); height:963px}\n</style>"
//匹配图片（g表示匹配所有结果i表示区分大小写）
var imgReg = /url\s*\((\s*[A-Za-z0-9\-\_\.\/\:]+\s*)\)\s*;?/gi;
//match操作后，得到类似['url(//img30...539.jpg);','url(//img30....b1539.jpg);']的数组
var arr = str.match(imgReg);
var _html = '';
//循环，将数组中所有项的“url(”替换成“http:”，将“);”替换成空
arr.map((item,index)=>{
    _html += item.replace(/url\(/g, 'http:').replace(/\);/g, '');
})

下面是我爱模板网在项目中的实际代码：

if (appCss) {
  //提取css和html中的所有图片
  var imgReg = /url\s*\((\s*[A-Za-z0-9\-\_\.\/\:]+\s*)\)\s*;?/gi;
  var _html = '';
  var arr = appCss.match(imgReg);
  arr.map((item, index) => {
    _html += '<img style="max-width:100%; display:block;" src="';
    _html += item.replace(/url\(/g, 'http:').replace(/\);/g, '');
    _html += '">';
  })
  WxParse.wxParse('content', 'html', _html, this, 10);
} else {
  WxParse.wxParse('content', 'html', appIntroduction, this, 10);
}

这里的appCss就是京东返回的类似上面的css，而appIntroduction则是返回的html，一般如果没有返回appCss，那么图片就在appIntroduction，直接显示即可，而如果返回了appCss，则图片就在appCss中，就需要用正则将css中的图片全部抽离出来，单独组成html来显示。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！