微信小程序rich-text富文本中有图片时需要自适应
发布时间：2022-09-08 10:18:46作者：顺晟科技点击：
如果文本中的图片只有<img src="">那么可以直接替换，但是如果有其他的样式比如width,height,style时就需要先去掉其，再替换
方法如下：
/** * 处理富文本里的图片宽度自适应 * 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|*} */ function formatRichText(html){ let newContent= html.ｒｅｐｌａｃｅ(/<img[^>]*>/gi,function(match,capture){ match = match.ｒｅｐｌａｃｅ(/style="[^"]+"/gi, '').ｒｅｐｌａｃｅ(/style='[^']+'/gi, ''); match = match.ｒｅｐｌａｃｅ(/width="[^"]+"/gi, '').ｒｅｐｌａｃｅ(/width='[^']+'/gi, ''); match = match.ｒｅｐｌａｃｅ(/height="[^"]+"/gi, '').ｒｅｐｌａｃｅ(/height='[^']+'/gi, ''); return match; }); newContent = newContent.ｒｅｐｌａｃｅ(/style="[^"]+"/gi,function(match,capture){ match = match.ｒｅｐｌａｃｅ(/width:[^;]+;/gi, 'width:100%;').ｒｅｐｌａｃｅ(/width:[^;]+;/gi, 'width:100%;'); return match; }); newContent = newContent.ｒｅｐｌａｃｅ(/<br[^>]*\/>/gi, ''); newContent = newContent.ｒｅｐｌａｃｅ(/\<img/gi, '<img style="width:100%;height:auto;display:block;margin:10px 0;"'); return newContent; }// module.exports = { // formatRichText // }
module.exports = { formatRichText: formatRichText }
- 上一篇 : 微信小程序开发-滑动操作
- 下一篇 : 微信小程序文本如何换行
