h5网页解析京东商城商品详情富文本数据(后端php)
京东的富文本编辑器数据,通过观察发现图片都是background-img里面,这样不太好让图片宽度100%,不变形。于是通过后端php把所有的图片路径都匹配出来,然后显示即可,显示的时候注意宽度100%,高度不限制就不会变形了。
<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-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 .M16244382726261{width:750px; background-color:#f2f2f2; background-size:100% 100%; background-image:url(//img30.360buyimg.com/sku/jfs/t1/186563/35/9836/488804/60d2f3bbE128bf332/47b15323d57c1362.jpg); height:1665px} .ssd-module-wrap .M16244382726382{width:750px; background-color:#d7d7d7; background-size:100% 100%; background-image:url(//img30.360buyimg.com/sku/jfs/t1/183679/27/10656/635318/60d2f3bbE3b1f4ed0/0bdc86b900caf4a1.jpg); height:1627px} .ssd-module-wrap .M16244382726463{width:750px; background-color:#f2f2f2; background-size:100% 100%; background-image:url(//img30.360buyimg.com/sku/jfs/t1/171646/12/16307/279559/60d2f3baE85fedf15/6cd11ce04ac824a2.jpg); height:1172px} .ssd-module-wrap .M16244382726574{width:750px; background-color:#b3b3b3; background-size:100% 100%; background-image:url(//img30.360buyimg.com/sku/jfs/t1/195204/18/9747/951634/60d2f3bcE55e6b76e/6ade5fa27a064c9f.jpg); height:1712px} .ssd-module-wrap .M16244382726695{width:750px; background-color:#f2f2f2; background-size:100% 100%; background-image:url(//img30.360buyimg.com/sku/jfs/t1/181671/34/10613/554909/60d2f3bbE7cd6ef08/1e1c3892fc3b7c79.jpg); height:1278px} .ssd-module-wrap .M16244382726806{width:750px; background-color:#e9e9e9; background-size:100% 100%; background-image:url(//img30.360buyimg.com/sku/jfs/t1/184524/24/10824/636932/60d2f3bbE0a4d8c62/fc38ad58f323a8c3.jpg); height:1286px} .ssd-module-wrap .M16244382726917{width:750px; background-color:#d7d7d7; background-size:100% 100%; background-image:url(//img30.360buyimg.com/sku/jfs/t1/179382/5/10894/725646/60d2f3bcEd03d1c0a/7fe847ff508a94b4.jpg); height:1364px} .ssd-module-wrap .M16244382727058{width:750px; background-color:#b3b3b3; background-size:100% 100%; background-image:url(//img30.360buyimg.com/sku/jfs/t1/183032/13/10740/143776/60d2f3baEeea68180/47060486a80aa2a8.jpg); height:1392px} .ssd-module-wrap .M16244382727219{width:750px; background-color:#d7d7d7; background-size:100% 100%; background-image:url(//img30.360buyimg.com/sku/jfs/t1/187679/15/9772/192397/60d2f420E7216734c/4f3ff5d923ec7d55.jpg); height:1080px} </style><div cssurl='//sku-market-gw.jd.com/css/pc/100001127674.css?t=1626072851002'></div><div id='zbViewModulesH' value='12576'></div><input id='zbViewModulesHeight' type='hidden' value='12576'/><div skudesign="100010"></div><div class="ssd-module-wrap" > <div class="ssd-module M16244382726261 animate-M16244382726261" data-id="M16244382726261"> </div> <div class="ssd-module M16244382726382 animate-M16244382726382" data-id="M16244382726382"> </div> <div class="ssd-module M16244382726463 animate-M16244382726463" data-id="M16244382726463"> </div> <div class="ssd-module M16244382726574 animate-M16244382726574" data-id="M16244382726574"> </div> <div class="ssd-module M16244382726695 animate-M16244382726695" data-id="M16244382726695"> </div> <div class="ssd-module M16244382726806 animate-M16244382726806" data-id="M16244382726806"> </div> <div class="ssd-module M16244382726917 animate-M16244382726917" data-id="M16244382726917"> </div> <div class="ssd-module M16244382727058 animate-M16244382727058" data-id="M16244382727058"> </div> <div class="ssd-module M16244382727219 animate-M16244382727219" data-id="M16244382727219"> </div> </div> <!-- 2021-06-23 04:51:17 -->
后端php处理数据代码如下,处理逻辑如下如果能匹配出来background-image的数组,则认定是京东的产品详情,然后把图片一个一个输出就可以了,如果不是京东产品原样子显示即可。
<?php preg_match_all("/background-image:url((.+?));/", $info['goodwx'], $match); if(!empty($match[2])){ foreach ($match[2] as $k=>$v){ $v=trim($v,"("); $v=trim($v,")"); echo "<img src='http:".$v."' />"; } }else { echo $info['goodwx']; } ?>
处理后的html输出显示如下图,然后通过css控制下class等于exchange下面的img标签width都是100%,高度不限制,就不变形了!
版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。
本文链接:h5网页解析京东商城商品详情富文本数据(后端php) - http://www.wlphp.com/?post=287