微信小程序：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 富文本中图片自适应

微信小程序：rich-text 富文本中图片自适应相关推荐

微信小程序 - 解决 rich-text 富文本解析图片无法自适应宽高问题（图片超出屏幕宽度且不受控）
前言注意:您无法通过直接指定 <img> 标签样式来试图设置为自适应图片. 使用官方 <rich-text> 富文本组件解析时, 当内容包含图片(大图)时显示的结果就会超出屏 ...
微信小程序如何显示富文本，类似v-html，rich-text
一.微信小程序需求,有一段富文本字符串需要解析并展示在页面上: 结构如下 :content 二.解决办法一.用过vue 的都知道vue 有个 v-html 属性,可以准换html格式并且展示: 但是 ...
微信小程序开发(十三)富文本插件wxParse的wxParseImgTap的bug修复
在上一篇微信小程序开发(十二)富文本插件wxParse的使用中,我已经使用了wxParse插件.下午有时间就仔细的把玩了一下,发现了一个bug. 问题描述仔细看报错,我们会发现是wxParse.js ...
微信朋友圈图片对话php源码,微信小程序实现聊天对话(文本、图片)功能
本文实例为大家分享了微信小程序实现聊天对话功能的具体代码,供大家参考,具体内容如下这是我实际项目线上的代码, 或许有些不足 || 和你的需求不符合. 上图: to_news.wxml {{tabda ...
微信小程序显示HTML富文本
效果图上面是转化后的,下面是后台获取的HTML标签下载wxParse文件 git地址:https://github.com/icindy/wxParse 找到 wxParse 文件夹复制到你的项 ...
微信小程序解析html富文本插件wxparse的使用
第一步:下载把wxparse文件放到根目录下第二步:引入<import src="../../wxParse/wxParse.wxml"/> 在xx.wxml页面 ...
微信小程序解析渲染Web App中的富文本内容
前提:微信小程序里面没有DOM对象,不能直接操作DOM. 问题:在日常的web前端开发中,必然会接触到富文本编辑器,如何在小程序里展示渲染富文本编辑器中的HTML元素呢? 测试内容:wangEdito ...
小程序PHP字体,微信小程序在text文本实现多种字体样式
这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下微信小程序比较特别,它的wxml只允许用自 ...
微信html字体颜色代码,微信小程序在text文本实现多种字体样式
这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下微信小程序比较特别,它的wxml只允许用自 ...

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

微信小程序：rich-text 富文本中图片自适应相关推荐

最新文章

热门文章