h5 页面通过正则表达式给html结构中的图片修改样式（正则表达式）

缺乏、安全感 2021-07-25 13:22 302阅读 0赞

## 正则表达式 ##

var regex1 = new RegExp("(i?)(\<img)(?!(.*?style=['\"](.*)['\"])[^\>]+\>)","gmi");
 //给不含style="" 或 style='' 的img标签加上style=""
 htmlstr = htmlstr.replace(regex1, "$2 style=\"\"$3");
 console.log("增加style=\"\"后的html字符串："+htmlstr);
 //正则匹配含有style的img标签
 var regex2 = new RegExp("(i?)(\<img.*?style=['\"])([^\>]+\>)","gmi");
 //在img标签的style里面增加css样式(这里增加的样式：display:block;max-width:100%;height:auto;border:5px solid red;)
 htmlstr = htmlstr.replace(regex2, "$2display:block;max-width:100%;height:auto;border:5px solid red;$3");
 console.log("在img标签的style里面增加样式后的html字符串："+htmlstr);

通过app分享到微信的h5页面中，图片展示有问题。

由于app是用Uniapp开发的，所有使用到的结构单位都是`upx`，但是在h5页面中这个单位又不能自适应手机端，因此会出现图片大小与app相差很大的问题。

h5页面中获取到的html结构如下所示：

essay: "哈哈哈哈<img src="https://58d.oss-cn-hangzhou.aliyuncs.com/images/160595524410734.png" alt="图片" width="320upx"><img src="https://58d.oss-cn-hangzhou.aliyuncs.com/images/1605955254555143.png" alt="图片" width="320upx"><img src="https://58d.oss-cn-hangzhou.aliyuncs.com/images/1605955271696133.png" alt="图片" width="320upx">技术监督局点解点解记得记得就哈哈哈哈"

可以看到`img`标签中的样式有个`width=320upx`

为了能够让所有的图片能够自适应屏幕，比如宽度占据屏幕的100%，则需要重新给`img`添加行间样式。

则可以通过最上面的代码修改，  
最终显示的结构如下图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/26a20e0a1ced486cb571baa1cc578b46.png