富文本回显图片溢出容器

简单粗暴    content content.replace(/\<img/gi, '<img style="width:100%;height:auto" ');

上面那个 有时候不好用 用下面的

formatText(html) {
        // 实现rich-text富文本中图片宽度最大100%function formatContent (html) { // 去掉img标签里的style、width、height属性
        let content_data = 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;
        }); // 修改所有style里的width属性为max-width:100%
        content_data = content_data.replace(/style="[^"]+"/gi, function (match, capture) {
            match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
            return match;
        }); // 去掉<br/>标签
        content_data = content_data.replace(/<br[^>]*\/>/gi, ''); // img标签添加style属性:max-width:100%;height:auto
        content_data = content_data.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:0px auto;"');
        return content_data
    }

 

posted on 2022-08-25 15:35  贲风  阅读(44)  评论(0)    收藏  举报