zoukankan      html  css  js  c++  java
  • uniapp 富文本图片100%显示

    下面的这个方法是在百度上找的,但是老是报错,一直没找到原因,索性自己就挨个检查了下,发现在过滤之前需要对传过来的值进行检测,是字符串才能让这个方法执行

    filters: {
        formatRichText(html) { //控制小程序中图片大小
            let newContent = ''
                newContent = html.replace(/<img[^>]*>/gi,
                function(match) {
                    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) {
                    match = match.replace(/[^;]+;/gi, 'max-100%;').replace(/[^;]+;/gi, 'max-100%;');
                    return match;
                });
                newContent = newContent.replace(/<br[^>]*/>/gi, '');
                newContent = newContent.replace(/<img/gi, '<img style="max-100%;height:auto;display:inline-block;margin:10rpx auto;"');
                return newContent;
    
            
    
        }
    },

    以下为完整方法

    filters: {
        formatRichText(html) { //控制小程序中图片大小
            let newContent = ''
            if (typeof(html) == 'string') { //检测值为字符串才能进行replace操作
                newContent = html.replace(/<img[^>]*>/gi,
                function(match) {
                    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) {
                    match = match.replace(/[^;]+;/gi, 'max-100%;').replace(/[^;]+;/gi, 'max-100%;');
                    return match;
                });
                newContent = newContent.replace(/<br[^>]*/>/gi, '');
                newContent = newContent.replace(/<img/gi, '<img style="max-100%;height:auto;display:inline-block;margin:10rpx auto;"');
                return newContent;
    
            }
    
        }
    },
  • 相关阅读:
    【BZOJ2525】[Poi2011]Dynamite 二分+树形DP
    【BZOJ2560】串珠子 状压DP+容斥
    【BZOJ2726】[SDOI2012]任务安排 斜率优化+cdq分治
    [NOIP2017]宝藏 状压DP
    [NOIP2017]逛公园 最短路+拓扑排序+DP
    [NOIP2017]列队 离线+SBT
    【CF628D】Magic Numbers 数位DP
    【BZOJ2791】[Poi2012]Rendezvous 倍增
    sql 通过游标 拆分xml结构
    sql字符转换函数大全
  • 原文地址:https://www.cnblogs.com/sxdpanda/p/14061208.html
Copyright © 2011-2022 走看看