迫于客户说uparse卡顿，分享一个rich-text的简单方案

使用场景是商品详情页 多张大图 基本没有复杂样式

uparse碰到的问题是，图片加载卡顿，需要等一段时间才能适应全屏

使用rich-text h5下没有太大问题 其他平台图片可能超出屏幕宽度

使用方法

data() {  
            return {  
                content:`<img style='' src='/static/image/Businessmen.png'></img>`  
            }  
        },  
        onLoad() {  
                this.content=htmlBeautify(this.content,{  
                                                                                                  img: {  
                                                                                           "max-width": "100%"  
                                                                                             }  
                                                                                               })  
        },

/**  
 * 给html添加指定样式 常用于rich text的子节点  
 * @param {*} html 需要处理的html文本  
 * @param {*} rule {  
            img: {  
                "max-width": "100%"  
            }  
        }   增加的样式规则 {元素名称:{css名称:属性}}  
 */  
const htmlBeautify = (html, rule) => {  
    if (!rule) {  
        rule = {  
            img: {  
                "max-width": "100%"  
            }  
        }  
    }  

    for (const key in rule) {  
        if (rule.hasOwnProperty(key)) {  
            const element = rule[key];  
            let style = ';'  
            for (const k in element) {  
                if (element.hasOwnProperty(k)) {  
                    const v = element[k];  
                    style += `${k}:${v};`  
                }  
            }  

            // let reg = new RegExp(`<${key}>`, 'g')  
            var reg = new RegExp(`(i?)(\<${key})(?!(.*?style=[\'\"](.*)[\'\"])[^\>]+\>)`, "gmi");  
            let reg1 = new RegExp(`<${key}(.*?)style=[\'\"](.*?)[\'\"]`, 'gmi')  

            html = html.replace(reg, `$2 style="" $3`).replace(reg1, `<${key} $1 style="$2${style}"`)  
        }  
    }  
    // html = html.replace(/<p>/, '<p style="">').replace(/<p(.*?)style=[\'\"](.*?)[\'\"]/g, `<p $1 style="$2;max-width:100%;background:#333;"`)  

    console.log(html)  
    return html  
}