首页 > 建站教程 > 小程序、公众号 >  正则获取CSS中所有的背景图片地址,微信小程序显示京东商品详情正文

正则获取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来显示。