博客

原始字符串

let str = '<p style="text-align: center;"><span style="font-size: 18px;"><span style="display: inline-block;width: 36.67vw;height: 36.67vw;"><img src="http://i1.zhaodehealth.com/images/0/440/40/518429845768765440.png" data-width="90vw" data-height="90vw" style="width: 90vw;" class="fr-fic fr-dii"></span><br></span></p>';

1 过滤掉包含img标签的span标签

function fit(html) {
	var newContent= html.replace(/<span style\b\s*=\"display\: inline-block\;width\:(.*)[\"\']><img[^>]*>/gi,function(match,capture) {		
	    return match.match(/<img[^>]*>/);
	});
    return formatImg(newContent);
}

2.计算图片宽高并替换

function formatImg(html){
			var showW,showH;
			var clientWidth = 375;
			
	        if(clientWidth>750) {
	            clientWidth = 750
	        }
	        var rem=clientWidth/375*100;
	        showW = clientWidth - rem*0.2;

            var newContent= html.replace(/<img[^>]*>/gi,function(match,capture) {
            	var getW = match.match(/width\b\s*=\s*[\'\"]?([^\'\"]*)[\'\"]?/i);//获取到的宽
            	var getH= match.match(/height\b\s*=\s*[\'\"]?([^\'\"]*)[\'\"]?/i);//获取到的高
            	var getDataW = match.match(/data\-width\b\s*=\s*[\'\"]?([^\'\"]*)[\'\"]?/i);//获取到的宽--兼容版本
            	var getDataH= match.match(/data\-height\b\s*=\s*[\'\"]?([^\'\"]*)[\'\"]?/i);//获取到的高--兼容版本

            	// 兼容
            	if (getDataW) {
            		if (parseFloat(getDataW[1]) >= 90) { //大于300的
            			showH = parseInt(parseFloat(getDataH[1]) * showW/90);
            			let replaceImg = match.replace(/style=\"(.*)\"/gi, 'style="width:'+showW+'px;height:'+ showH +'"');
	            		match = '<div style="width:'+showW+'px;height:'+ showH +'px">'+ replaceImg +'</div>';
            		} else {
            			// <300
            			showW = parseInt(parseFloat(getDataW[1]) * 3);
            			showH = parseInt(parseFloat(getDataH[1]) * 3);
            			let replaceImg = match.replace(/style=\"(.*)\"/gi, 'style="width:'+showW+'px;height:'+ showH +'px"');
	            		match = '<div style="width:'+showW+'px;height:'+ showH +'px">'+ replaceImg +'</div>';
            		}
            	} else if (getW) {
            		// 新的
            		if (getW > showW) {
            			if (getH) {
		            		showH = showW * parseInt(getH[1])/parseInt(getW[1]);
		            		showH = showH + "px";
		            	} else {
		            		showH="auto";
		            	}
		            	let replaceImg = match.replace(/style=\"(.*)\"/gi, 'style="width:'+showW+'px;height: '+ showH +'"');
	            		match = '<div style="width:'+showW+'px;height: '+ showH +'">'+ replaceImg +'</div>';
            		} else {
            			if (getH) {
		            		getH = getH[1] + "px";
		            	} else {
		            		getH="auto";
		            	}
		            	let replaceImg = match.replace(/style=\"(.*)\"/gi, 'style="width:'+getW[1]+'px;height: '+ getH +'"');
            			match = '<div style="width:'+getW[1]+'px;height: '+ getH +'">'+ replaceImg +'</div>';
            		}
            	}          	
	            // var match = match.replace(/style=\"(.*)\"/gi, 'class="img-responsive"');
	            return match;
	        });
        	return newContent;
    	}

返回新的字符串