js自动回复富文本_JS实用功能-1、JS 富文本内容img图片自适应手机端

大家好，我是“廖某某前端日志”，今天来继续为大家分享一下开发日常记录。

很多时候，在获取后端接口图文详情的富文本内容中，往往img标签中包含的图片如果图片过大，那么在手机无法达到自适应的效果，往往会溢出容器的宽度。那么这就需要我们前端来处理一下了。

问题描述： (图片溢出情况)

首先我们来思考一下，应该需要怎么做，才能让图片自适应呢？

图片要自适应，不能溢出父类宽度，可以设置图片的max-width：100%就好了。一般后端接口返回的富文本数据是字符串，那么我们直接来操作字符串的替换就好了。

JS字符串替换，利用正则匹配一下img标签，然后再String对象的replace方法处理一下就好。

let str3 = "";

let result= str3.replace(/

console.log(result);

可以通过上图运行结果，其中的img标签中添加了一个style属性，并添加max-width：100% 的样式。

这样在手机端就不会出现溢出容器的情况了。

正常情况(图片适应显示)。

以为