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;
    
            }
    
        }
    },
  • 相关阅读:
    CAST()类型转换函数
    CLR LOH的危险
    保持积极的态度,态度决定一切!
    as 操作符和强行转换的区别
    查内存覆盖从以前的帖子里总结的
    CLR中的范型为什么不支持很多操作符?
    如何做一个好的Team Leader?
    Dispose Pattern总结
    慎用Reflection
    CLR Enum类型内幕
  • 原文地址:https://www.cnblogs.com/sxdpanda/p/14061208.html
Copyright © 2011-2022 走看看