小程序用正则表达式给 <img /> 加上 style
本文发布于 5 年前，部分内容可能已经失去参考价值。
当使用在线编辑器编辑一篇文章（或从 Word 复制）后，会得到包含 HTML 标签的字符串内容，可以直接将它输出到页面上而不需要进行 HTML 编码。
但是，当我们需要改变图片大小时，我们发现有些图片的尺寸是直接使用 style 属性固定的，除了用 JS 进行后期处理，我们可以在服务端对 <img /> 进行修正。
这个场景会在小程序开发的时候遇到。
网上一般使用正则表达式直接将 <img 替换成 <img style="max-width: 100%; height: auto;" ，缺点是如果该 <img /> 本身就带有 style 属性，那么会出现一个标签两个 style，很多情况导致这两个样式同时失效，所以我们应针对有 style 和无 style 分别处理。
// 把 <img src="a.jpg" style="display: block;" /> 替换成 <img src="a.jpg" style="display: block;;max-width:100%;height:auto;" />
Content = Content.replace(/(\<img\s+[^>]*style\s*\=\s*['"][^'"]*)(['"])/gi, '$1;max-width:100%;height:auto;$2');
// 把 <img src="b.jpg" /> 替换成 <img src="b.jpg" style="max-width:100%;height:auto;" />
Content = Content.replace(/(\<img\s+((?!style).)+?)(\/?>)/gi, '$1 style="max-width:100%;height:auto;" $3');复制以上代码时，半角空格可能会变成全角空格，请注意修正。
当有 style 时，我们将 max-width: 100%; height: auto;追加在原样式之后，以重写原样式。这里没有直接判断原样式是否以 ; 结尾，而是直接追加 ;，这并不会影响实现展示效果。
在判断没有 style 用到正则表达式的“断言”，参：https://blog.csdn.net/xuyangxinlei/article/details/81359366
延伸阅读：C# 用 HtmlAgilityPack 给 HTML 节点加上 style
可能相关的内容
