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

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

admin3年前 (2023-03-15)技术分享1874

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


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="https://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;
?>


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

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

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

分享给朋友:

相关文章

[Windows] Adobe Flash Player 34.0.0.92及可用版修改方法

[Windows] Adobe Flash Player 34.0.0.92及可用版修改方法

随着 2021 年的到来,Adobe Flash Player 也迎来了告别,Adobe 在 2020 年 12 月 31 日后将不再支持 Flash Player。其实早在 2017 年,Adobe 公司就已宣布,计划在 2020 年底逐...

PHP和Redis实现在高并发下的抢购及秒杀功能

抢购、秒杀是平常很常见的场景,面试的时候面试官也经常会问到,比如问你淘宝中的抢购秒杀是怎么实现的等等。抢购、秒杀实现很简单,但是有些问题需要解决,主要针对两个问题:一、高并发对数据库产生的压力二、竞争状态下如何解决库存的正确减少("...

PIP 更换国内安装源linux/windows

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

Nginx服务崩溃自动重启脚本(监控进程服务并自动重启进程服务)脚本

有一台服务器运行着Ngin最近突然有一次崩溃,导致使用方当天无法访问网页端,然后我不得不登录服务器,检查各项服务,发现nginx崩溃了,于是重启Nginx,问题解决。后来为了防止Nginx再发生这种情况给运维带来的运维成本,于是写了一个脚本...

用CMD命令查询域名的DNS解析记录:A,NS,MX,CNAME,TXT

1、查询域名的A记录nslookup -qt=A bitefu.net当然查询A记录你直接用ping命令来ping域名也可以获得A记录。2、查询域名的NS记录nslookup -qt=NS bitefu.net3、查询域名的MX记录nslo...

用apicloud 免费,简单封装一个wap手机网站成android app

用apicloud 免费,简单封装一个wap手机网站成android app

APICloud是国内较早布局低代码开发的平台之一,其发布的低代码效率工具Plus Mode,为IT项目中每个角色提供专业工具,将需求分析、产品原型、UI设计、前端开发、后端开发紧密衔接,并基于行业大数据对前置环节进行复用,最终缩减大量重复...

发表评论

访客

看不清,换一张

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