uniapp 小程序端渲染富文本图片宽度溢出

模板

1
<rich-text :nodes="article.articleContent | formatRichText"></rich-text>

filters

1
export const formatRichText = (html) => {
2
	let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
3
		match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
4
		match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
5
		match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
6
		return match;
7
	});
8
	newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
9
		match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
10
		return match;
11
	});
12
	newContent = newContent.replace(/<br[^>]*\/>/gi, '');
13
	newContent = newContent.replace(/\<img/gi,
14
		'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
15
	return newContent;
16
}
uniapp
富文本

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！