微信小程序:rich-text 富文本中图片自适应

简介: 微信小程序:rich-text 富文本中图片自适应
/**
 * 处理富文本里的图片宽度自适应
 * 1.去掉img标签里的style、width、height属性
 * 2.img标签添加style属性:max-width:100%;height:auto
 * 3.修改所有style里的width属性为max-width:100%
 * 4.去掉<br/>标签
 * @param html
 * @returns {void|string|*}
 */
export function formatRichText(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:10px 0;"');
  return newContent;
}

参考

微信小程序 rich-text 富文本中图片自适应

相关文章
|
JavaScript 前端开发
JS之url进行编码和解码(三种方式)
JS之url进行编码和解码(三种方式)
19871 2
|
JavaScript
uniapp中复选框的使用
uniapp中复选框的使用
582 0
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
vue项目中使用vue-router进行路由配置及嵌套多级路由
|
JavaScript 前端开发 安全
【Vue3 + Vite】6个非常强大的后台管理项目!开源且免费!
【Vue3 + Vite】6个非常强大的后台管理项目!开源且免费!
|
前端开发
antd_使用Input封装实现Form校验效果(最终版)
本文介绍了在Ant Design (antd)框架中如何封装Input组件以实现表单校验效果,并提供了封装代码示例以及如何在提交时进行校验。
475 4
antd_使用Input封装实现Form校验效果(最终版)
|
小程序
小程序:official-account公众号关注组件
小程序:official-account公众号关注组件
637 0
|
前端开发 UED 开发者
【专栏】探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施
【4月更文挑战第29天】本文探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施:简化动画路径、控制元素数量、优化代码结构、利用硬件加速及性能监测。通过实际案例展示了优化效果,强调了性能优化对提升用户体验的重要性。在开发中,应持续关注并优化动画性能,以适应网页应用的需求。
826 1
|
域名解析 负载均衡 网络协议
【域名解析DNS专栏】DNS解析中的Anycast技术:原理与优势
【5月更文挑战第27天】Anycast技术是解决DNS解析高效、稳定和安全问题的关键。它将一个IP地址分配给多地服务器,客户端请求自动路由至最近的低负载服务器,减少延迟,提高解析速度。此外,Anycast实现负载均衡,缓解DDoS攻击,并确保高可用性。通过遍历Anycast服务器选择最低延迟者进行DNS解析,实现网络性能优化。随着技术发展,Anycast在DNS解析中的应用将更加广泛。
1081 2