微信小程序 - 富文本图片宽度自适应(正则)
引言:在微信小程序里,比如商品展示页面的商品详情会有图片展示,PC端设置的商品详情是PC端的宽度,所以在小程序里图片会显示不全,这时就应该做相应的处理,使小程序里图片显示正确
思路
把图片的宽度改为手机屏幕对应的宽度
微信小程序需要知道的知识
需要知道微信小程序里有自己的宽度标准,单位为rpx;
针对所有不同尺寸的浏览器,微信小程序里规定屏幕宽为750rpx;
解决
WXML
<view class='html_detail'><rich-text nodes='{{artical}}'></rich-text>
</view>
复制代码
WXS
data={artical:''}async onLoad(){const json = await api.getDetail();if(json !== null){this.artical = util.formatRichText(json.detail.description);}
}
复制代码
若artical里只有图片,并且图片没有设置style和宽度/高度
util.js
function formatRichText(html){let newContent= html.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"');return newContent;
}module.exports = {formatRichText
}
复制代码
若artical里包含多种标签
util.js
/*** 处理富文本里的图片宽度自适应* 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.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;
}module.exports = {formatRichText
}
复制代码
微信小程序 - 富文本图片宽度自适应(正则)相关推荐
- 微信小程序富文本图片宽度自适应以及文字自动换行等解决方法
let content = res.content // 后台返回的富文本值 content = content.replace(/;\swidth\s:\s*/g, ';max-width:100% ...
- 微信小程序富文本编辑器获取内容
1.新建wxParse文件夹 里面的结构是这样:wxParse :{ emojis (文件夹) html2json.js (文件) htmlparser.js(文件) showdown.js (文件) ...
- 微信小程序富文本解析
微信小程序富文本解析 *人狠话不多,直接代码搞起* html代码(后台返回的html代码) <p>这是一段文字</p><p><strong>这是加粗的字 ...
- 微信小程序富文本处理
微信小程序富文本处理 wxml页面代码: <rich-text nodes ="{{content.content}}"></rich-text> ts代码 ...
- 微信小程序富文本渲染(rich-text)换行失效
微信小程序富文本渲染(rich-text)换行失效 给rich-text标签加css 样式 white-space: pre;
- 微信小程序 富文本编辑器组件 editor
微信小程序 富文本编辑器组件 editor <view class="container"><view class="titlebox"> ...
- 微信小程序富文本修改图片的大小
一.先言 有时后端直接返回的富文本内容,前端展示的时候会出现图片太大或太小,所以需要处理一下,,,实现并不难,主要是利用replace方法全局替换图片img标签的style样式,修改其宽度样式. 二. ...
- 微信小程序富文本编辑器editor初体验-图片上传
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 以前没有小程序富文本编辑器,只能输入文字,图片上传后,在服 ...
- 微信小程序 富文本组件使用
能够使用微信小程序提供的富文本组件及引入的第三方富文本组件 掌握使用微信小程序的表单组件 掌握使用微信小程序的form表单及如何提交数据 掌握使用微信小程序的导航及跳转组件 一.基础内容组件 1.1 ...
最新文章
- 水稻微生物组时间序列分析2b-散点图拟合
- 打造新华社「AI合成主播」的“分身术”为何物?
- PCL点云库法向量显示,vtk错误“no override found for vtkActor”
- BOOST_PROTO_EXTENDS_MEMBERS宏相关的测试程序
- 让div垂直以及水平居中浏览器窗口
- k8s ubuntu cni_周一见 | CNCF 人事变动、最新安全漏洞、K8s 集群需警惕中间人攻击...
- SVM-支持向量机(code实现)
- 全球及中国熔融碳酸盐燃料电池行业市场消费量调研及未来前瞻报告2022-2028年
- ABC互联 shopex网店主机 试用
- (4)华为ensp--RIP基本配置
- java web报表开发_2020主流JAVA WEB报表工具对比
- 奇葩经历之一_Hotmail邮箱无法查看和发送任何邮件
- HDU - 1546 Idiomatic Phrases Game
- 5G无线技术基础自学系列 | 双工技术
- Cadence Allegro颜色显示设置图文教程及视频演示
- BIOS INT 10中断功能详解
- 统计中文文本中人物出现次数
- flux和redux
- 榆熙教育:拼多多平台考核如何达成系统考核指标
- 交通分配(MSA_DAIL算法)
热门文章
- pkg-config工具在实际工程中的用法
- 配置.net 3.0开发环境
- DataGrid连接Access的快速分页法——动态生成SQL语句
- X@X.X域名转向的实现
- objdump查看目标文件构成
- C++中的内存对齐介绍
- Qt中文手册 之 QTableWidget
- Linux之tee命令
- 量子计算机人类意识云,意识上传-人类距离永生还要多久(大脑的工作原理很有可能与量子计算机一致)...
- linux平台调试终端,10款Linux平台上优秀的调试器,总有一款适合你!