wkiwi的博客

小程序富文本图片宽度自适应

发布时间:2个月前热度: 38 ℃评论数:

在小程序开发中,采用了富文本编辑器生成html上传至后端,但是富文本中图片带有width属性,很遗憾图片不是自适应,大屏手机编辑的内容,在小屏幕手机预览会超出屏幕,因此要对富文本内容进行处理,方案筛选出所有图片添加样式,下方为查找图片并添加样式的核心代码

let htmlText =  '<p><img src="XXXXXXXX" alt="图像" width="318" style=""></p><p>12313123131313131</p><p><br></p>';


//正则匹配不含style="" 或 style='' 的img标签
var regex1 = new RegExp("(i?)(\]+\>)","gmi");
//给不含style="" 或 style='' 的img标签加上style=""
htmlText = htmlText.replace(regex1, "$2 style=\"\"$3");
console.log("增加style=\"\"后的html字符串:"+htmlText);
//正则匹配含有style的img标签
var regex2 = new RegExp("(i?)(\]+\>)","gmi");
//在img标签的style里面增加css样式(这里增加的样式:max-width:100%;height:auto;)
htmlText = htmlText.replace(regex2, "$2max-width:100%;height:auto;$3");
console.log("在img标签的style里面增加样式后的html字符串:"+htmlText);



小程序程序富文本,图片宽度自适应,rich-text

栏目导航

  1. 杂谈
  2. PHP
  3. 建站
  4. WEB前端

手机扫码访问