js解析京东商城商品详情富文本数据(适用于小程序)

  • 内容
  • 评论
  • 相关

实现方案就是匹配富文本里面有没有url(),如果有就证明是京东的富文本(普通后台的富文本编辑器不会把图片放入url()),然后把所有图片提取出来,然后把所有图片字符串拼接到一起,显示到页面即可。

<meta  charset="utf-8" >
<script>
var str="<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 .M16097421812931{width:750px; background-color:#e9e9e9; background-size:100% 100%; background-image:url(\/\/img30.360buyimg.com\/sku\/jfs\/t1\/110334\/35\/13454\/447042\/5ea014a4E80d30932\/ab866f6775943bcc.jpg); height:1429px}\n.ssd-module-wrap .M15875495860892{width:750px; background-color:#e9e9e9; background-size:100% 100%; background-image:url(\/\/img30.360buyimg.com\/sku\/jfs\/t1\/118141\/26\/14231\/336804\/5f2cd0c6E154ddd7b\/da68d258af915978.jpg); height:1428px}\n.ssd-module-wrap .M15875495899713{width:750px; background-color:#e9e9e9; background-size:100% 100%; background-image:url(\/\/img30.360buyimg.com\/sku\/jfs\/t1\/108077\/5\/14012\/395666\/5ea514f3E6e6bfaa1\/0887eb0387c2f20c.jpg); height:1429px}\n.ssd-module-wrap .M15875495943234{width:750px; background-color:#e9e9e9; background-size:100% 100%; background-image:url(\/\/img30.360buyimg.com\/sku\/jfs\/t1\/113267\/21\/3275\/388101\/5ea6a1c0Eef9cf10d\/86e7affd07630282.jpg); height:1428px}\n.ssd-module-wrap .M15875495986425{width:750px; background-color:#e9e9e9; background-size:100% 100%; background-image:url(\/\/img30.360buyimg.com\/sku\/jfs\/t1\/106723\/11\/19457\/301920\/5ea014a3E515b96d8\/4eef587873c31800.jpg); height:1429px}\n.ssd-module-wrap .M15875496034426{width:750px; background-color:#e9e9e9; background-size:100% 100%; background-image:url(\/\/img30.360buyimg.com\/sku\/jfs\/t1\/106931\/40\/19547\/482503\/5ea014a4Ef40698d5\/93e5e68ef57b56b0.jpg); height:1428px}\n.ssd-module-wrap .M15875496075897{width:750px; background-color:#e9e9e9; background-size:100% 100%; background-image:url(\/\/img30.360buyimg.com\/sku\/jfs\/t1\/112233\/37\/2112\/365716\/5ea014a3Ed29a00cd\/c218e4b92c5a3ac2.jpg); height:1429px}\n.ssd-module-wrap .M15875496119338{width:750px; background-color:#e9e9e9; background-size:100% 100%; background-image:url(\/\/img30.360buyimg.com\/sku\/jfs\/t1\/90002\/10\/19456\/613785\/5ea014a4Ec68f2bfa\/d9f2c93a717b60a2.jpg); height:1428px}\n.ssd-module-wrap .M15875496166479{width:750px; background-color:#e9e9e9; background-size:100% 100%; background-image:url(\/\/img30.360buyimg.com\/sku\/jfs\/t1\/125654\/37\/1577\/307495\/5ebe358eEdef59365\/9c95bffd29b25fc8.jpg); height:1429px}\n.ssd-module-wrap .M158754962487210{width:750px; background-color:#e9e9e9; background-size:100% 100%; background-image:url(\/\/img30.360buyimg.com\/sku\/jfs\/t1\/109091\/29\/13402\/259197\/5ea014a3Eedbca9a1\/d6a5c32d731cf25a.jpg); height:1428px}\n.ssd-module-wrap .M158754962971411{width:750px; background-color:#e9e9e9; background-size:100% 100%; background-image:url(\/\/img30.360buyimg.com\/sku\/jfs\/t1\/86906\/10\/19509\/306218\/5ea014a3Eaa658aee\/6ad622ce5da38aac.jpg); height:1429px}\n.ssd-module-wrap .M158754963396812{width:750px; background-color:#e9e9e9; background-size:100% 100%; background-image:url(\/\/img30.360buyimg.com\/sku\/jfs\/t1\/113109\/15\/7889\/214432\/5ec75b64E447311d9\/b9b87b89379a6b0e.jpg); height:1428px}\n<\/style><div cssurl='\/\/sku-market-gw.jd.com\/css\/pc\/5185043.css?t=1625038329836'><\/div><div id='zbViewModulesH'  value='17142'><\/div><input id='zbViewModulesHeight' type='hidden' value='17142'\/><div skudesign=\"100010\"><\/div><div class=\"ssd-module-wrap\" >\n            <div class=\"ssd-module M16097421812931 animate-M16097421812931\" data-id=\"M16097421812931\">\n        \n<\/div>\n<div class=\"ssd-module M15875495860892 animate-M15875495860892\" data-id=\"M15875495860892\">\n        \n<\/div>\n<div class=\"ssd-module M15875495899713 animate-M15875495899713\" data-id=\"M15875495899713\">\n        \n<\/div>\n<div class=\"ssd-module M15875495943234 animate-M15875495943234\" data-id=\"M15875495943234\">\n        \n<\/div>\n<div class=\"ssd-module M15875495986425 animate-M15875495986425\" data-id=\"M15875495986425\">\n        \n<\/div>\n<div class=\"ssd-module M15875496034426 animate-M15875496034426\" data-id=\"M15875496034426\">\n        \n<\/div>\n<div class=\"ssd-module M15875496075897 animate-M15875496075897\" data-id=\"M15875496075897\">\n        \n<\/div>\n<div class=\"ssd-module M15875496119338 animate-M15875496119338\" data-id=\"M15875496119338\">\n        \n<\/div>\n<div class=\"ssd-module M15875496166479 animate-M15875496166479\" data-id=\"M15875496166479\">\n        \n<\/div>\n<div class=\"ssd-module M158754962487210 animate-M158754962487210\" data-id=\"M158754962487210\">\n        \n<\/div>\n<div class=\"ssd-module M158754962971411 animate-M158754962971411\" data-id=\"M158754962971411\">\n        \n<\/div>\n<div class=\"ssd-module M158754963396812 animate-M158754963396812\" data-id=\"M158754963396812\">\n        \n<\/div>\n\n    <\/div>\n<!-- 2021-01-05 03:51:41 -->";

var regex1 = /url\((.+?)\)/g; // () 小括号
var arr=[];
arr=str.match(regex1);
var newstr="";
var richtext="";
var j=0;
var len=0;
if(arr){
	for(j = 0,len=arr.length; j < len; j++) {
			newstr=arr[j];
			newstr=newstr.replace(/url\(/, "");
			newstr=newstr.replace(/\)/, "");
			//console.log(newstr);
			richtext+='<img src="'+newstr+'"  style="width:100%;height:auto;display:block;" />';
	}
document.write(richtext);
}else {
var richtext=str;
document.write(richtext);
}

</script>

本文标签:

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

本文链接:js解析京东商城商品详情富文本数据(适用于小程序) - http://wlphp.com/?post=288

发表评论

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