微信小程式 – 富文字圖片寬度自適應（正則）

孟小歡發表於2019-01-16
微信小程式

引言：在微信小程式裡，比如商品展示頁面的商品詳情會有圖片展示，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
  }複製程式碼

來源：https://juejin.im/post/5c3d97aef265da611e4de22b

相關文章