原生小程序富文本图片适应手机屏幕，放大功能

.wxml

<view wx:if="{
    
    {word}}" wx:for="{
    
    {word}}" wx:key="index" class="word">
	<view class='word_title'>{
    
    {
    
    item.title}}</view>
	<image src='{
    
    {item.image}}' mode="heightFix" class="word_image" bindtap='bandBigImage' data-current="{
    
    {item.image}}"
		data-index="{
    
    {index}}"></image>

	<view class="contentbox px-3">
		<button bindtap="wordAnswer" data-index='{
    
    {index}}' style="background: #e6c779;width: 246rpx;" class="bth">
			<rich-text style="color:black;font-weight: 100;">点击查看答案 </rich-text>
		</button>
		<view class="contentbox px-3" wx:if="{
    
    {item.nav}}">
			<view style="height: 30rpx;"></view>
			
			//富文本
			<view  class='text' wx:if="{
    
    {item.answer}}" bindtap="toBig" data-answer="{
    
    {item.answer}}">
				<rich-text nodes="{
    
    {item.answer}}" space="emsp"></rich-text>
			</view>
			//富文本

			<view wx:else style="text-align: center;color: red;">该题目没有答案</view>
		</view>
	</view>
</view>

.js

	getHistoryData() {
    
    
		let {
    
    
			page,
			limit,
			nomore
		} = this.data;

		if (page == 1) {
    
    
			wx.showLoading({
    
    
				title: '加载中',
			})
		}

		if (nomore) {
    
    
			return;
		}
		reqHistoryData({
    
    
			topic_id: this.data.topic_id,
			token: app.token(),
			limit,
			page,
		}).then(res => {
    
    

			const list = res.data.data.word;
			const word = this.data.word;


			list.forEach(function(item, index) {
    
    
				item['nav'] = false;
				
				let wxwidth = wx.getSystemInfoSync().windowwidth;
				
				//富文本实现适应手机屏幕
				if(item['answer']){
    
    
					item['answer'] = item['answer'].replace(/\<img/gi,'<img style="width:100%;vertical-align:middle;"')
				}
			})
				//富文本实现适应手机屏幕

			this.setData({
    
    
				word: [...word, ...list],
				page: page + 1,
			})
			if (this.data.word.length == 0) {
    
    
				this.setData({
    
    
					showNullImage: true
				})
			}
			if (list.length < limit) {
    
    
				this.setData({
    
    
					nomore: true,
				})
			}

			wx.hideLoading()
		})
	},

	//实现放大图片
	toBig(e){
    
    
		//富文本图片放大
		var nodes = e.currentTarget.dataset.answer;
		if (nodes.indexOf("src") >= 0) {
    
    
		  //正则匹配所有图片路径
		  var imgs = [];
		  nodes = nodes.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
    
    
		    imgs.push(capture);
			console.log(imgs);
		    return '';
		  });
		  //清除图片后正则匹配清除所有p标签
		  nodes = nodes.replace(/<p(([\s\S])*?)<\/p>/g, function (match, capture){
    
    
		    return '';
		  });
		}
		
		var index = 0;
		let current = imgs[index];
		
		wx.previewImage({
    
    
			current, // 当前显示图片的http链接
			urls: imgs // 需要预览的图片http链接列表
		});
		
	}
	//实现放大图片

效果图：