当前位置:首页 > 技术分享 > 正文内容

php js正则 解决 详情页图片超出问题 匹配img标签内容追加style样式,给富文本中的图片设置大小和居中显示

admin2年前 (2023-03-15)技术分享1417

做小程序或手机端经常会遇到商品详情,文章详情里带图片的从别的地方复制过来带着样式,导致超出屏幕显示不全的问题


php解决

function format_img($content,$style=''){
    if(empty($style))$style = 'max-width:100%;height:auto;';
    $content= preg_replace("/(\<img)(?!(.*?style=['\"](.*)['\"])[^\>]+\>)/i", "$1 style=\"\"$2" , $content); 
    return preg_replace("/(\<img.*?style=['\"])([^\>]+\>)/i", "$1".$style."$2" , $content); 
}
//如果上面无法替换可以小改一下,用下面这个
function format_img($content,$style=''){
    if(empty($style))$style = 'max-width:100%;height:auto;';
    $content= preg_replace("/(\<img)(?!(style=['\"](.*)['\"])[^\>]+\>)/i", "$1 style=\"\"$2" , $content); 
    return preg_replace("/(\<img.*?style=['\"])([^\>]+\>)/i", "$1".$style."$2" , $content); 
}

Js解决

function format_img(htmlstr){
	//正则匹配不含style="" 或 style='' 的img标签
	var regex1 = new RegExp("(i?)(\<img)(?!(.*?style=['\"](.*)['\"])[^\>]+\>)","gmi");
	//给不含style="" 或 style='' 的img标签加上style=""
	htmlstr = htmlstr.replace(regex1, "$2 style=\"\"$3");
        //正则匹配含有style的img标签
	var regex2 = new RegExp("(i?)(\<img.*?style=['\"])([^\>]+\>)","gmi");
	htmlstr = htmlstr.replace(regex2, "$2max-width:100%;height:auto;border:5px solid red;$3");
	return htmlstr;
}


还有一种比较变态的做法是直接用正则表达式删除img标签的width、height、style

<?php
$txt1='<a href="http://blog.bitefu.net/post/501.html" style="margin:0 auto;border-radius:6px; background-color: #ffb808;display: block;text-align: center;padding: 12px 12px 12px 12px;color:#fff; width: 180px;font-weight: bold;">查看历史中奖记录</a><img src="http://www.baidu.com/Uploads/ueditor/image/20170512/1494556977462196.jpg" title="1494556977462196.jpg" alt="timg.jpg" style="width: 524px; height: 689px;" width="524" height="689"><img src="http://www.baidu.com/Uploads/ueditor/image/20170512/1494556977462196.jpg" title="1494556977462196.jpg" alt="timg.jpg" style="width: 524px; height: 689px;" width="524" height="689">';
$txt1 = preg_replace( '/(<img.*?)(style=.+?[\'|"])|((width)=[\'"]+[0-9]+[\'"]+)|((height)=[\'"]+[0-9]+[\'"]+)/i', '$1' , $txt1); 
echo $txt1;
?>


扫描二维码推送至手机访问。

版权声明:本文由小刚刚技术博客发布,如需转载请注明出处。

本文链接:http://blog.bitefu.net/post/501.html

分享给朋友:

相关文章

360浏览器如何禁止切换到兼容模式[本地终极办法]

360浏览器如何禁止切换到兼容模式[本地终极办法]

浏览器内核控制标签meta说明背景介绍由于众所周知的原因,国内的主流浏览器都是双核浏览器:基于Webkit的内核用于常用网站的高速浏览,基于IE的内核主要用于部分网银、政府、办公系统等网站的正常使用。以360浏览器为例,我们优先通过Webk...

[教程] WTG备份新方法——FFU镜像格式

[教程] WTG备份新方法——FFU镜像格式

FFU(Full Flash Update) 格式是一种基于扇区的磁盘镜像文件格式,默认使用快速哈夫曼压缩(Xpress-Huffman)算法压缩,在捕获和部署时会生成哈希表进行校验,并可以使用DISM修改捕获的镜像。FFU格式很适合WTG...

VirtualXposed 不支持32位应用 32位无法安装问题解决办法

VirtualXposed 不支持32位应用 32位无法安装问题解决办法

VirtualXposed 是基于VirtualApp 和 epic 在非ROOT环境下运行Xposed模块的实现(支持5.0~10.0)。与 Xposed 相比,目前 VirtualXposed 有...

贾氏鸣天鼓健耳养肾操

贾氏鸣天鼓健耳养肾操

《贾氏鸣天鼓健耳养肾操》鸣天鼓是健耳强肾治耳病的古法,贾氏越云自创的鸣天鼓健耳养肾操是在古法的基础上创建。顺序:1静坐挺胸。2双手放心脏位置的胸口,左手掌盖住右手掌。3闭目静心,深呼吸19下。4双手相互搓揉,让手掌发热。5用发热的双手手掌严...

微软Windows 10升级密钥(例如家庭版升级为企业版) 不能用于激活系统

微软Windows 10升级密钥(例如家庭版升级为企业版) 不能用于激活系统

下面的密钥,是微软官方提供的,仅能用于Windows10系统版本的升级,比如从家庭版升级为专业版、专业版升级为企业版等。升级密钥不能用于激活系统,激活需要KMS或者数字权利,由于涉及到版权问题,在此不宜分享,请大家自行查找激活相关的内容。准...

PIP 更换国内安装源linux/windows

pip国内的一些镜像  阿里云 http://mirrors.aliyun.com/pypi/simple/   中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/   豆瓣(...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。