uni-app：解析富文本图片超出

1.如果解析富文本，图片没有设置style和宽度/高度

formatRichText(html){
            let newContent= html.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"');
            return newContent;
               }

// let newContent= html.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"'); 每个匹配到的<img>标签添加一个style属性，其值为max-width:100%;height:auto;display:block;

调用方法：this.context = this.formatRichText(content)

2.里包含多种标签

（1）.去掉img标签里的style、width、height属性；

（2）.img标签添加style属性：max-width:100%;height:auto；

（3）.修改所有style里的width属性为max-width:100%；

（4）去掉<br/>标签。

formatRichText(html){
let newContent= html.replace(/<img[^>]>/gi,function(match,capture){
match = match.replace(/style="[^"]+"/gi, '').replace(/style\s?=\s*?([‘"])[\s\S]?\1/ig, '');
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="width:100%;height:auto;display:block;"');
return newContent;
}

代码注释：

let newContent = html.replace(/<img[^>]>/gi, function(match, capture)  //  这行代码开始处理HTML内容中的所有 <img> 标签。
match = match.replace(/style="[^"]+"/gi, '').replace(/style\s?=\s*?([‘"])[\s\S]?\1/ig, '');  //  移除 <img> 标签中的 style 属性，不管这个属性是用双引号还是单引号包围的。
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');  //  行代码移除 <img> 标签中的 width 属性，不管这个属性是用双引号还是单引号包围的。
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');return match;}); //  这行代码移除 <img> 标签中的 height 属性，不管这个属性是用双引号还是单引号包围的。
return match // 替换函数返回修改后的 match 字符串，即移除了 style、width 和 height 属性的 <img> 标签。
newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture)  // 这行代码开始处理HTML内容中的所有 style 属性。
match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi, 'width:100%;') // 在这个替换函数中，它查找任何 width 样式属性，并将它们替换为 width:100%。
return match // 替换函数返回修改后的 match 字符串，即替换了 width 属性值后的样式。
newContent = newContent.replace(/<br[^>]/>/gi, '') // 这行代码移除所有 <br> 标签，无论它们是否有属性
newContent = newContent.replace(/<img/gi, '<img style="width:100%;height:auto;display:block;"') // 这行代码为所有 <img> 标签添加了一个内联 style 属性，确保图片的宽度为100%，高度自动，并且作为块级元素显示。
return newContent// 函数返回处理后的HTML内容。