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%,高度不限制,就不变形了!

1.jpg

本文标签:

版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。

本文链接:h5网页解析京东商城商品详情富文本数据(后端php) - http://wlphp.com/?post=287

发表评论

电子邮件地址不会被公开。 必填项已用*标注