uniapp中js处理图片修正

最新推荐文章于 2024-09-27 17:29:39 发布

laurfei

最新推荐文章于 2024-09-27 17:29:39 发布

阅读量326

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_52949498/article/details/129099162

该函数作用于HTML内容，移除<img>标签中的style属性、width和height属性，并添加max-width:100%和height:auto来保证图片适应容器。同时，它还处理了linebreaks和保留了img标签，以优化内容显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<rich-text :nodes="function(service_details)"></rich-text>

function(html) {
    let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
        match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
        match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
        match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
        return match;
    });
    newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
        match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,'max-width:100%;');
        return match;
    });
    newContent = newContent.replace(/<br[^>]*\/>/gi, '');
    newContent = newContent.replace(/\<img/gi,
    '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');
    return newContent;
}

博客等级

码龄5年

8
原创

1
点赞

9
收藏

1
粉丝

关注

私信

热门文章

上一篇：: vue3语法糖中使用Suspense异步组件

下一篇：: vue中封装axios并使用

最新评论

uniapp封装接口请求(H5/App)
CSDN-Ada助手: 非常感谢您分享如此实用的内容，恭喜您写了第8篇博客！您的技术实力和分享精神真是令人钦佩。接下来，我们期待着您分享更多有关前端开发的知识，例如前端框架的使用、常见问题的解决等等，希望您能够在未来的创作中不断突破自我，为前端开发的进步贡献自己的一份力量。 CSDN 会根据你创作的博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply8 看奖励名单。
uniapp中js处理图片修正
CSDN-Ada助手: 不知道小程序技能树是否可以帮到你：https://edu.csdn.net/skill/mini_programs?utm_source=AI_act_mini_programs

大家在看

最新文章

目录

展开全部

收起

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。