uniapp 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) {
    if(!html){
        return ''
    }
    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, 'width:100%;').replace(/width:[^;]+;/gi, '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;
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章