关于富文本编辑图片移动端太大溢出，太小正常处理

在使用富文本编辑完文章，生成html字符串后，直接给移动端使用。如果图片太大，会出现溢出，图片太小没有问题。

如果简单粗暴给全局样式img添加width 100%，是可以解决溢出问题，但又造成了一个新的问题，就是小图片之前没有溢出也都变成了100%

故需要使用正则依次处理一下html里面的html字符串。

同时，这里需要考虑new Image 第一次加载图片宽度未0的情况，

也要注意没有图片的情况

  function handleHtml(html) {
            // 获取所有的img
            let reg = /<img.*?>/g
            // 获取img里面的图片url
            let srcReg = /\ssrc=['"](.*?)['"]/
            // 获取图片里面的style 替换成100%
            let imgStyleReg = /style=['"](.*?)['"]/

            let imgArr = html.match(reg) || []
            let urlArr = imgArr.map(item => {
                return item.match(srcReg)[1]
            })
            console.log('url', urlArr)
            if (urlArr.length) {
                handleImgArr(urlArr).then(res => {
                    console.log('获取数据', res)
                    let newHtml = html.replace(reg, function () {
                        var args = arguments;
                        let imgText = args[0]
                        let imgUrl = imgText.match(srcReg)[1]
                        return IsOverWitdh(imgUrl, res) ? imgText.replace(imgStyleReg, 'style="width: 100%;" $1') : imgText
                    })
                    test.innerHTML = newHtml
                })
            } else {
                test.innerHTML = html
            }



        }

        function handleImgArr(urlArr) {
            let imgObj = {}
            let len = 0
            return new Promise((resolve, reject) => {
                urlArr.forEach(url => {
                    var image = new Image();
                    image.src = url;
                    image.onload = () => {
                        len++
                        imgObj[url] = image.width
                        if (len === urlArr.length) {
                            resolve(imgObj)
                        }

                    }
                })
            })
        }
        // 判断图片宽度，如果大于650就width:100%,
        function IsOverWitdh(url, urlObj) {
            let width = urlObj[url]
            return width !== undefined ? width > 650 : 0
        }

这样就可以实现大图片不溢出，小图片正常显示