改写富文本框里面的内联样式-一一网

背景是有个需求，需要用到其他地方编辑好的富文本框内容，我前段获取到之后直接展示，PC端还好，没什么问题，但是手机端就遇到问题了，手机端需要把富文本框里面的内容转化成合适的尺寸，相当于样式重写，遇到的问题主要是2个，1是把px转化成rem或者vw，本文讲的是转化成rem，2是图片尺寸可能有问题，需要把图片转化成指定的宽和高吧，比如把图片宽转化成375px;

替换img标签里面的style样式

思路是先找到每个img标签，然后再找到每个style=””,然后替换掉

 let a = '<img /> <span style="fsdfxv">sdfdsfsdf</span> <img style="xvxcvxcvs"/>cxcxcxc<img style="fdfdfdsfsdf"/>';
 let reg = /<img.*?(style=".*?"){0,1}\/>/g;
 let b = a.replace(reg, function ($1, $2) {
      if ($1.indexOf("style=") > -1) {
        return $1.replace(/style=".*"/g, 'style="aaaaaaa"')
      } else {
        return $1.replace(/\/>/g, 'style="aaaaaaa"/>')
      }
    })
复制代码

主要遇到的问题是需要注意正则默认是贪婪模式， let reg = /<img.*(style=".*"){0,1}\/>/g;;正常情况下我们第一步写正则想匹配img标签，是这么想的，但是这个会发现，我们把字符串a全给匹配上了，包括span标签，这个原因是我们用.*匹配中间那些杂七杂八的东西的时候，我们没有考虑到正则匹配默认是贪婪模式，强调匹配更多的东西，.*匹配所有，这样他就把后面的内容都给匹配上了。

解决方法呢，就是使用非贪婪模式，.*？即可解决。

替换富文本框的px样式，替换成rem适用手机布局

let currentSize = 16; //系统根字体
let content = '<img /> <span style="font-size: 14px">sdfdsfsdf</span> <img style="xvxcvxcvs"/>cxcxcxc<img style="font-size: 20px"/>';
        function fn($1, $2) {
                let x = $2;
                let y = currentSize;
                return `:${x/y}rem`
        }
   content.replace(/:\s*(\d+)px/g, fn)     
复制代码